React.js - อินพุตสูญเสียโฟกัสเมื่อแสดงผล

ฉันแค่เขียนลงในการป้อนข้อความและในonChangeกรณีที่ฉันโทรsetStateไปดังนั้น React จะแสดงผล UI ของฉันอีกครั้ง ปัญหาคือการป้อนข้อความมักจะเสียโฟกัสดังนั้นฉันต้องโฟกัสอีกครั้งสำหรับแต่ละตัวอักษร: D

var EditorContainer = React.createClass({

    componentDidMount: function () {
        $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
    },

    componentDidUpdate: function () {
        console.log("zde");
        $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
    },

    changeSelectedComponentName: function (e) {
        //this.props.editor.selectedComponent.name = $(e.target).val();
        this.props.editor.forceUpdate();
    },

    render: function () {

        var style = {
            height: this.props.height + 'px'
        };
        return (
            <div className="container" style={style}>
                <div className="row">
                    <div className="col-xs-6">
                    {this.props.selected ? <h3>{this.props.selected.name}</h3> : ''}
                    {this.props.selected ? <input type="text" value={this.props.selected.name} onChange={this.changeSelectedComponentName} /> : ''}
                    </div>
                    <div className="col-xs-6">
                        <ComponentTree editor={this.props.editor} components={this.props.components}/>
                    </div>
                </div>
            </div>
        );
    }

});

หากไม่เห็นรหัสที่เหลือนี่เป็นการคาดเดา เมื่อคุณสร้าง EditorContainer ให้ระบุคีย์เฉพาะสำหรับคอมโพเนนต์:

<EditorContainer key="editor1"/>

เมื่อการเรนเดอร์เกิดขึ้นหากเห็นคีย์เดียวกันสิ่งนี้จะบอกว่า React don't clobber และสร้างมุมมองใหม่แทนที่จะใช้ซ้ำ จากนั้นรายการที่โฟกัสควรคงโฟกัสไว้

ฉันกลับมาที่นี่อีกครั้งและอีกครั้งและมักจะหาทางแก้ไขที่อื่นในตอนท้าย ฉันจะบันทึกไว้ที่นี่เพราะฉันรู้ว่าฉันจะลืมเรื่องนี้อีกครั้ง!

สาเหตุของinputการสูญเสียโฟกัสในกรณีของฉันเกิดจากการที่ฉันกำลังแสดงผลการinputเปลี่ยนแปลงสถานะ

รหัส Buggy:

import React from 'react';
import styled from 'styled-components';

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    const Container = styled.div``;
    const Input = styled.input``;
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

ดังนั้นปัญหาคือฉันมักจะเริ่มเขียนโค้ดทุกอย่างในที่เดียวเพื่อทดสอบอย่างรวดเร็วและแยกมันออกเป็นโมดูลแยกกันในภายหลัง แต่ที่นี่กลยุทธ์นี้เกิดผลย้อนกลับเนื่องจากการอัปเดตสถานะในการเปลี่ยนแปลงอินพุตทริกเกอร์ฟังก์ชันการแสดงผลและโฟกัสหายไป

การแก้ไขทำได้ง่ายโดยทำการแยกส่วนตั้งแต่เริ่มต้นหรืออีกนัยหนึ่งคือ "ย้ายInputส่วนประกอบออกจากrenderฟังก์ชัน"

รหัสคงที่

import React from 'react';
import styled from 'styled-components';

const Container = styled.div``;
const Input = styled.input``;

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

อ้างอิง วิธีแก้ปัญหา: https://github.com/styled-components/styled-components/issues/540#issuecomment-283664947

ถ้ามันเป็นปัญหาภายในตอบสนองเราเตอร์<Route/>ใช้เสาแทนrendercomponent

<Route path="/user" render={() => <UserPage/>} />

การสูญเสียโฟกัสเกิดขึ้นเนื่องจากcomponentเสาใช้React.createElementในแต่ละครั้งแทนที่จะเพียงแค่แสดงการเปลี่ยนแปลงอีกครั้ง

ดูรายละเอียดที่นี่: https://reacttraining.com/react-router/web/api/Route/component

คำตอบของฉันคล้ายกับที่ @ z5h พูด

ในกรณีของฉันฉันเคยMath.random()สร้างเฉพาะkeyสำหรับส่วนประกอบ

ฉันคิดว่า keyใช้สำหรับทริกเกอร์การเรนเดอร์สำหรับคอมโพเนนต์นั้น ๆ เท่านั้นแทนที่จะแสดงผลคอมโพเนนต์ทั้งหมดในอาร์เรย์นั้นอีกครั้ง (ฉันส่งคืนอาร์เรย์ของคอมโพเนนต์ในโค้ดของฉัน) ฉันไม่รู้ว่ามันถูกใช้สำหรับการกู้คืนสถานะหลังจากการแสดงผล

การเอาออกนั้นได้ผลสำหรับฉัน

การใช้autoFocusแอตทริบิวต์กับinputองค์ประกอบสามารถใช้เป็นวิธีแก้ปัญหาได้ในสถานการณ์ที่มีเพียงอินพุตเดียวที่ต้องเน้น ในกรณีนี้keyแอตทริบิวต์จะไม่จำเป็นเนื่องจากเป็นเพียงองค์ประกอบเดียวและยิ่งไปกว่านั้นคุณไม่ต้องกังวลเกี่ยวกับการทำลายinputองค์ประกอบเป็นองค์ประกอบของตัวเองเพื่อหลีกเลี่ยงการสูญเสียโฟกัสในการแสดงผลองค์ประกอบหลักซ้ำ

ฉันมีพฤติกรรมเดียวกัน

ปัญหาในรหัสของฉันคือฉันสร้าง Array ขององค์ประกอบ jsx ที่ซ้อนกันดังนี้:

const example = [
            [
                <input value={'Test 1'}/>,
                <div>Test 2</div>,
                <div>Test 3</div>,
            ]
        ]

...

render = () => {
    return <div>{ example }</div>
}

ทุกองค์ประกอบใน Array ที่ซ้อนกันนี้แสดงผลใหม่ทุกครั้งที่ฉันอัปเดตองค์ประกอบหลัก ดังนั้นปัจจัยการผลิตจึงสูญเสียที่นั่น "ref" prop ทุกครั้ง

ฉันแก้ไขปัญหาด้วยการแปลงอาร์เรย์ภายในเป็นส่วนประกอบปฏิกิริยา (ฟังก์ชันที่มีฟังก์ชันการแสดงผล)

const example = [
            <myComponentArray />
        ]

 ...

render = () => {
    return <div>{ example }</div>
}

แก้ไข:

ปัญหาเดียวกันนี้จะปรากฏขึ้นเมื่อฉันสร้างแบบซ้อนกัน React.Fragment

const SomeComponent = (props) => (
    <React.Fragment>
        <label ... />
        <input ... />
    </React.Fragment>
);

const ParentComponent = (props) => (
    <React.Fragment>
        <SomeComponent ... />
        <div />
    </React.Fragment>
);

ฉันแก้ไขปัญหาเดียวกันกับการลบคีย์แอตทริบิวต์ในอินพุตและองค์ประกอบหลักของเขา

// Before
<input
    className='invoice_table-input invoice_table-input-sm'
    type='number'
    key={ Math.random }
    defaultValue={pageIndex + 1}
    onChange={e => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0
        gotoPage(page)
    }}
/>
// After
<input
    className='invoice_table-input invoice_table-input-sm'
    type='number'
    defaultValue={pageIndex + 1}
    onChange={e => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0
        gotoPage(page)
    }}
/>

ฉันเพิ่งพบปัญหานี้และมาที่นี่เพื่อขอความช่วยเหลือ ตรวจสอบ CSS ของคุณ! ช่องป้อนข้อมูลไม่สามารถมีได้user-select: none;หรือใช้ไม่ได้กับ iPad

สำหรับฉันปัญหานี้เกิดจากการที่ช่องป้อนข้อมูลการค้นหาแสดงผลในส่วนประกอบเดียวกัน (เรียกว่า UserList) เป็นรายการผลการค้นหา ดังนั้นเมื่อใดก็ตามที่ผลการค้นหาเปลี่ยนไปคอมโพเนนต์ UserList ทั้งหมดจะแสดงผลรวมถึงช่องป้อนข้อมูลด้วย

ทางออกของฉันคือการสร้างองค์ประกอบใหม่ทั้งหมดเรียกว่าUserListSearchซึ่งเป็นแยกออกจากรายการผู้ ฉันไม่จำเป็นต้องตั้งค่าคีย์ในช่องป้อนข้อมูลใน UserListSearch เพื่อให้สิ่งนี้ทำงานได้ ฟังก์ชันการแสดงผลของ UsersContainer ของฉันตอนนี้มีลักษณะดังนี้:

class UserContainer extends React.Component {
  render() {
    return (
      <div>
        <Route
          exact
          path={this.props.match.url}
          render={() => (
            <div>
              <UserListSearch
                handleSearchChange={this.handleSearchChange}
                searchTerm={this.state.searchTerm}
              />
              <UserList
                isLoading={this.state.isLoading}
                users={this.props.users}
                user={this.state.user}
                handleNewUserClick={this.handleNewUserClick}
              />
            </div>
          )}
        />
      </div>  
    )
  }
}

หวังว่านี่จะช่วยใครบางคนได้เช่นกัน

หากช่องใส่อยู่ภายในองค์ประกอบอื่น (เช่นองค์ประกอบภาชนะเช่น<div key={"bart"}...><input key={"lisa"}...> ... </input></div>- วงรีที่นี่แสดงให้เห็นรหัสละเว้น) จะต้องมีความสำคัญที่ไม่ซ้ำกันและคงในองค์ประกอบภาชนะ (เช่นเดียวกับช่องใส่) Elsewise, React จะแสดงองค์ประกอบคอนเทนเนอร์ใหม่ล่าสุดเมื่อสถานะของเด็กได้รับการอัปเดตแทนที่จะเป็นเพียงการแสดงผลคอนเทนเนอร์เก่า ตามเหตุผลควรอัปเดตเฉพาะองค์ประกอบลูก แต่ ...

ฉันมีปัญหานี้ขณะพยายามเขียนส่วนประกอบที่รับข้อมูลที่อยู่จำนวนมาก รหัสการทำงานมีลักษณะดังนี้

// import react, components
import React, { Component } from 'react'

// import various functions
import uuid from "uuid";

// import styles
import "../styles/signUp.css";

export default class Address extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address1: "",
      address2: "",
      address1Key: uuid.v4(),
      address2Key: uuid.v4(),
      address1HolderKey: uuid.v4(),
      address2HolderKey: uuid.v4(),
      // omitting state information for additional address fields for brevity
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ [`${event.target.id}`]: event.target.value })
  }

  render() {
    return (
      <fieldset>
        <div className="labelAndField" key={this.state.address1HolderKey} >
          <label className="labelStyle" for="address1">{"Address"}</label>
          <input className="inputStyle"
            id="address1"
            name="address1"
            type="text"
            label="address1"
            placeholder=""
            value={this.state.address1}
            onChange={this.handleChange}
            key={this.state.address1Key} ></input >
        </div> 
        <div className="labelAndField" key={this.state.address2HolderKey} >
          <label className="labelStyle" for="address2">{"Address (Cont.)"}</label>
          <input className="inputStyle"
            id="address2"
            name="address2"
            type="text"
            label="address2"
            placeholder=""
            key={this.state.address2Key} ></input >
        </div>
        {/* omitting rest of address fields for brevity */}
      </fieldset>
    )
  }
}

ผู้อ่านตาคมจะสังเกตว่า<fieldset>เป็นองค์ประกอบที่มี แต่ไม่ต้องใช้กุญแจ สิ่งเดียวกันถือสำหรับ<>และ<React.Fragment>หรือแม้กระทั่ง<div>ทำไม? อาจมีเพียงคอนเทนเนอร์ที่ต้องการคีย์เท่านั้น ฉันไม่รู้. ตามที่หนังสือเรียนคณิตศาสตร์กล่าวว่าคำอธิบายจะทิ้งไว้ให้ผู้อ่านเป็นแบบฝึกหัด

เหตุผลหลักคือ: เมื่อ React re-render การอ้างอิง DOM ก่อนหน้าของคุณจะไม่ถูกต้อง หมายความว่า react ได้เปลี่ยนโครงสร้าง DOM และคุณ this.refs.input.focus จะไม่ทำงานเนื่องจากไม่มีอินพุตที่นี่อีกต่อไป

คำตอบที่ให้มาไม่ได้ช่วยฉันนี่คือสิ่งที่ฉันทำ แต่ฉันมีสถานการณ์ที่ไม่เหมือนใคร

ในการล้างโค้ดฉันมักจะใช้รูปแบบนี้จนกว่าฉันจะพร้อมที่จะดึงส่วนประกอบไปยังไฟล์อื่น

render(){
   const MyInput = () => {
      return <input onChange={(e)=>this.setState({text: e.target.value}) />
   }
   return(
      <div>
         <MyInput />
      </div>
   )

แต่สิ่งนี้ทำให้มันเสียโฟกัสเมื่อฉันใส่โค้ดลงใน div โดยตรงมันก็ใช้ได้

return(
   <div>
      <input onChange={(e)=>this.setState({text: e.target.value}) />
   </div>
)

ฉันไม่รู้ว่าทำไมถึงเป็นแบบนี้นี่เป็นปัญหาเดียวที่ฉันเคยเขียนด้วยวิธีนี้และฉันทำในไฟล์ส่วนใหญ่ที่ฉันมี แต่ถ้าใครทำสิ่งที่คล้ายกันนี่เป็นสาเหตุที่ทำให้โฟกัสหายไป

ผมเปลี่ยนเสาไปvalue defaultValueที่เหมาะกับฉัน

...
// before
<input value={myVar} />

// after
<input defaultValue={myVar} />

ฉันมีปัญหาเดียวกันกับตาราง html ที่ฉันใส่บรรทัดข้อความในคอลัมน์ ภายในวงฉันอ่านวัตถุ json และฉันสร้างแถวโดยเฉพาะฉันมีคอลัมน์ที่มี inputtext

http://reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/

ฉันจัดการเพื่อแก้ปัญหาด้วยวิธีต่อไปนี้

import { InputTextComponent } from './InputTextComponent';
//import my  inputTextComponent 
...

var trElementList = (function (list, tableComponent) {

    var trList = [],
        trElement = undefined,
        trElementCreator = trElementCreator,
        employeeElement = undefined;



    // iterating through employee list and
    // creating row for each employee
    for (var x = 0; x < list.length; x++) {

        employeeElement = list[x];

        var trNomeImpatto = React.createElement('tr', null, <td rowSpan="4"><strong>{employeeElement['NomeTipologiaImpatto'].toUpperCase()}</strong></td>);
        trList.push(trNomeImpatto);

        trList.push(trElementCreator(employeeElement, 0, x));
        trList.push(trElementCreator(employeeElement, 1, x));
        trList.push(trElementCreator(employeeElement, 2, x));

    } // end of for  

    return trList; // returns row list

    function trElementCreator(obj, field, index) {
        var tdList = [],
            tdElement = undefined;

        //my input text
        var inputTextarea = <InputTextComponent
            idImpatto={obj['TipologiaImpattoId']}//index
            value={obj[columns[field].nota]}//initial value of the input I read from my json data source
            noteType={columns[field].nota}
            impattiComposite={tableComponent.state.impattiComposite}
            //updateImpactCompositeNote={tableComponent.updateImpactCompositeNote}
        />

        tdElement = React.createElement('td', { style: null }, inputTextarea);
        tdList.push(tdElement);


        var trComponent = createClass({

            render: function () {
                return React.createElement('tr', null, tdList);
            }
        });
        return React.createElement(trComponent);
    } // end of trElementCreator

});
...    
    //my tableComponent
    var tableComponent = createClass({
        // initial component states will be here
        // initialize values
        getInitialState: function () {
            return {
                impattiComposite: [],
                serviceId: window.sessionStorage.getItem('serviceId'),
                serviceName: window.sessionStorage.getItem('serviceName'),
                form_data: [],
                successCreation: null,
            };
        },

        //read a json data soure of the web api url
        componentDidMount: function () {
            this.serverRequest =
                $.ajax({
                    url: Url,
                    type: 'GET',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: this.state.serviceId }),
                    cache: false,
                    success: function (response) {
                        this.setState({ impattiComposite: response.data });
                    }.bind(this),

                    error: function (xhr, resp, text) {
                        // show error to console
                        console.error('Error', xhr, resp, text)
                        alert(xhr, resp, text);
                    }
                });
        },

        render: function () {
    ...
    React.createElement('table', {style:null}, React.createElement('tbody', null,trElementList(this.state.impattiComposite, this),))
    ...
    }



            //my input text
            var inputTextarea = <InputTextComponent
                        idImpatto={obj['TipologiaImpattoId']}//index
                        value={obj[columns[field].nota]}//initial value of the input I read //from my json data source
                        noteType={columns[field].nota}
                        impattiComposite={tableComponent.state.impattiComposite}//impattiComposite  = my json data source

                    />//end my input text

                    tdElement = React.createElement('td', { style: null }, inputTextarea);
                    tdList.push(tdElement);//add a component

        //./InputTextComponent.js
        import React from 'react';

        export class InputTextComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              idImpatto: props.idImpatto,
              value: props.value,
              noteType: props.noteType,
              _impattiComposite: props.impattiComposite,
            };
            this.updateNote = this.updateNote.bind(this);
          }

        //Update a inpute text with new value insert of the user

          updateNote(event) {
            this.setState({ value: event.target.value });//update a state of the local componet inputText
            var impattiComposite = this.state._impattiComposite;
            var index = this.state.idImpatto - 1;
            var impatto = impattiComposite[index];
            impatto[this.state.noteType] = event.target.value;
            this.setState({ _impattiComposite: impattiComposite });//update of the state of the father component (tableComponet)

          }

          render() {
            return (
              <input
                className="Form-input"
                type='text'
                value={this.state.value}
                onChange={this.updateNote}>
              </input>
            );
          }
        }

ปัญหาของฉันคือฉันตั้งชื่อคีย์ของฉันแบบไดนามิกด้วยค่าของรายการในกรณีของฉันคือ "name" ดังนั้นคีย์คือ key = { ${item.name}-${index}} ดังนั้นเมื่อฉันต้องการเปลี่ยนอินพุตที่มี item.name เป็นค่าคีย์ก็จะเปลี่ยนไปด้วยดังนั้นการตอบสนองจะไม่รู้จักองค์ประกอบนั้น

ปรากฎว่าฉันผูกมัดthisกับคอมโพเนนต์ซึ่งทำให้มันแสดงผล

ฉันคิดว่าจะโพสต์ไว้ที่นี่เผื่อว่าใครมีปัญหานี้

ฉันต้องเปลี่ยน

<Field
    label="Post Content"
    name="text"
    component={this.renderField.bind(this)}
/>

ถึง

<Field
    label="Post Content"
    name="text"
    component={this.renderField}
/>

แก้ไขง่ายเนื่องจากในกรณีของฉันฉันไม่ได้ต้องการจริงthisในrenderFieldแต่หวังว่าผมโพสต์นี้จะช่วยให้คนอื่น

ฉันมีปัญหานี้และปัญหากลับกลายเป็นว่าฉันใช้ส่วนประกอบที่ใช้งานได้และเชื่อมโยงกับสถานะขององค์ประกอบหลัก ถ้าฉันเปลี่ยนไปใช้ส่วนประกอบของคลาสปัญหาก็หายไป หวังว่าจะมีวิธีแก้ปัญหานี้เมื่อใช้ส่วนประกอบที่ใช้งานได้เนื่องจากสะดวกกว่ามากสำหรับการแสดงรายการแบบง่าย ๆ และคณะ

รวมรหัสถัดไปในการป้อนแท็ก:

ref={(input) => {
     if (input) {
         input.focus();
     }
 }}

ก่อน:

<input
      defaultValue={email}
      className="form-control"
      type="email"
      id="email"
      name="email"
      placeholder={"mail@mail.com"}
      maxLength="15"
      onChange={(e) => validEmail(e.target.value)}
/>

หลังจาก:

<input
     ref={(input) => {
          if (input) {
             input.focus();
          }
      }}
      defaultValue={email}
      className="form-control"
      type="email"
      id="email"
      name="email"
      placeholder={"mail@mail.com"}
      maxLength="15"
      onChange={(e) => validEmail(e.target.value)}
/>

วิธีง่ายๆในกรณีของฉัน:

<input ref={ref => ref && ref.focus()}
    onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
    />

refทริกเกอร์โฟกัสและทริกเกอร์onFocusเพื่อคำนวณจุดสิ้นสุดและตั้งค่าเคอร์เซอร์ตามนั้น