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