Mit React, klicken Sie auf den ersten Eingang zeigen Sie den zweiten Eingang, wie auf den zweiten Eingang Autofokus?

Question

Mit react, ich klicke auf den ersten Eingang, um den zweiten Eingang anzuzeigen (react-ace editor), wie man den zweiten Eingang (react-ace editor) automatisch fokussiert und den ersten Eingang verliert Fokus?

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

Pass focus={true} zum AceEditor, und sie machen es nicht, bis die input geklickt wird. Sobald der AceEditor gerendert ist, wird er fokussiert und verursacht somit die input Unschärfe.

Haben getestet und es funktioniert.

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