使用 React，点击第一个输入显示第二个输入，如何自动聚焦到第二个输入？

Question

使用react，我点击第一个输入显示第二个输入（react-ace editor），如何让第二个输入（react-ace editor）自动获得焦点，第一个输入失去焦点？

 constructor(props) {
    super(props);

    this.state = {
        hidden: true,
        value: props.value
    };
}
...
 render() {

 return <div className="form-group">
     <Input  onClick={() => this.showEditor()}  onChange={() => false} value={this.props.value}/>
     <div className={classNames({'hidden': this.state.hidden})}>
     <ReactAceEditor
        onLoad={(editor) => {
          editor.focus();
        }} 
     />
   </div>
   </div>
}

Answer 1

将focus={true}传递给AceEditor，在点击input之前不渲染它。 AceEditor 渲染后，它会聚焦并因此导致 input 模糊。

已测试，有效。

<input onClick={() => this.setState({ show: true })}/>
        { 
          this.state.show &&
            <AceEditor
              focus
              mode="javascript"
              theme="monokai"
              onChange={(newValue) => this.code=newValue}
              name="UNIQUE_ID_OF_DIV"
              editorProps={{$blockScrolling: true}}
            />
        }

使用 React，点击第一个输入显示第二个输入，如何自动聚焦到第二个输入？

Using React, click the first input show the second input, how to auto focus to the second input?

javascript

ace-editor

reactjs