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

Question

使用 react，我单击第一个输入以显示第二个输入(react-ace 编辑器

(，如何使第二个输入(react-ace 编辑器(自动获得焦点，第一个输入失去焦点？

 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}}
            />
        }