入力中に親状態が変化しても変わらない

Question

私は、少なくとも50個の入力からなる巨大なフォームを構築しています。

親関数

saveToState(details) { 
    const { company } = this.state; 
    company[details.part][details.element] = details.value; 
    this.setState({ company }); 
    } 

子コンポーネントに渡す（INPUT）

<FieldInput 
    label="Name (as shown) *" 
    part="information" 
    element="displayName" 
    saveToState={this.saveToState} 
/> 

： は、私は、フォームの状態への入力の値が保存されますフォームコンポーネントで機能を書いています入力コンポーネントは次のとおりです。

import React, { Component } from 'react'; 
export default class FieldInput extends Component { 
    render() { 
    const { label, part, element, saveToState } = this.props; 
    return (
     <div className="field"> 
     <label>{label}</label> 
     <div className="ui input"> 
      <input 
      type="text" 
      name={`${part}[${element}]`} 
      onChange={(e) => saveToState({ 
       part, 
       element, 
       value: e.target.value 
      })} 
      /> 
     </div> 
     </div> 
    ); 
    } 
} 

結果はいつでも私は入力に何かを入力するそれは実際に私が入力に書いたものを表示するために200〜300ミリ秒かかる、状態はすぐに更新を取得していますが、私は文字を入力するたびに私は親のフォームの新しい状態を設定し、成分。私はそれの周りに見つけた唯一の方法は、それを渡すことなく、親コンポーネント内でsaveToStateを使用することです。しかし、それは1000行のコードを必要とします、これを回避する方法はありますか？ありがとう！

Answer 1

この問題を解決する方法はたくさんあります。最も簡単なものと最も速いものは、onChangeの代わりにonBlurを使用することです。setStateは、入力を押したときではなく、入力がフォーカスを失ったときに発生しません。

import React, { Component } from 'react'; 
export default class FieldInput extends Component { 
    render() { 
    const { label, part, element, saveToState } = this.props; 
    return (
     <div className="field"> 
     <label>{label}</label> 
     <div className="ui input"> 
      <input 
      type="text" 
      name={`${part}[${element}]`} 
      onBlur={(e) => saveToState({ 
       part, 
       element, 
       value: e.target.value 
      })} 
      /> 
     </div> 
     </div> 
    ); 
    } 
}