反応し再レンダリングフォームの原因は、私は2つの変更ハンドラ、私の2 draftjsのための1つのテキストエリア、そして私の他のテキスト入力のための1つを持って反応するコンポーネントでフォームを持っている

Question

状態の変化に/ぼかし問題を集中します私はその依存切り替える二つのビューを持っている私のrenderメソッドでは私は午前モードを表示し、読み込みや編集：私は私のブラウザに入力を切り替えると

render() { 

    const Editable =() => (
     <div className="editor"> 
      <form className="editor-inner"> 
       <h3>Redigerar: Anbudsbrev</h3> 
       <h4>Rubrik</h4> 
       <input type="text" key="text01" name="title" defaultValue={this.state.title} onBlur={this.handleInputChange} /> 
       <h4>Text 1</h4> 
       <RichEditor editorState={this.state.editorState1} onChange={this.onChangeEditor('editorState1')} name="text01"/> 
       <h4>Citat</h4> 
       <input type="text" key="text02" name="quote01" defaultValue={this.state.quote01} onBlur={this.handleInputChange} /> 
       <h4>Text 2</h4> 
       <RichEditor editorState={this.state.editorState2} onChange={this.onChangeEditor('editorState2')} name="text02" /> 
       <EditorFooter {...this.props} submitForm={this.saveForm} /> 
      </form> 
     </div> 
    ); 

    const Readable =() => (
     <div> 
      <h1 className="header66">{this.state.title}</h1> 
      <div className="text66">{this.state.text01}</div> 
      <div className="quote100">{this.state.quote01}</div> 
      <div className="text66">{this.state.text02}</div> 
     </div> 
    ); 

    return (
     <div> 
      { this.props.isInEditMode ? <Editable /> : <Readable /> } 
     </div> 
    ); 
} 

私が取得するために、二回クリックする必要があります正しい入力に焦点を合わせる。

これは、各入力の「ぼかし」イベントで変更が発生し、状態が変更されたためにフォームが再レンダリングされるためです。フォームが再び降りると、{ this.props.isInEditMode ? <Editable /> : <Readable /> }を通過し、入力がフォーカスを失います。

問題は、これを回避する方法がわかりません。

Answer 1

私はそれを自分で解決しました。

EditableとReadableを私のコンポーネントの中に配置するのは良い考えではないことが判明しました。代わりに、私はそれらを自分のコンポーネントに移しました、そして今は正しく動作します。

class Editable extends React.Component { 
    render() { 
     return (
      <div className="editor"> 
       <form className="editor-inner"> 
        <h3>Redigerar: Anbudsbrev</h3> 
        <h4>Rubrik</h4> 
        <input type="text" name="title" defaultValue={this.props.title} onChange={this.props.handleInputChange} /> 
        <h4>Text 1</h4> 
        <RichEditor editorState={this.props.editorState1} onChange={this.props.onChangeEditor('editorState1')} name="text01" /> 
        <h4>Citat</h4> 
        <input type="text" name="quote01" defaultValue={this.props.quote01} onChange={this.props.handleInputChange} /> 
        <h4>Text 2</h4> 
        <RichEditor editorState={this.props.editorState2} onChange={this.props.onChangeEditor('editorState2')} name="text02" /> 
        <EditorFooter {...this.props} submitForm={this.props.saveForm} /> 
       </form> 
      </div> 
     ); 
    } 
}; 

class Readable extends React.Component { 
    render() { 
     return (
      <div> 
       <h1 className="header66">{this.props.title}</h1> 
       <div className="text66">{this.props.text01}</div> 
       <div className="quote100">{this.props.quote01}</div> 
       <div className="text66">{this.props.text02}</div> 
      </div> 
     ); 
    } 
};