ユーザー入力後に状態が変化したときに入力フィールドを変更します

Question

ユーザー入力後に状態が変化したときに入力フィールドを変更するよりリアクション型の方法を見つけようとしています。これは私の現在の設定ですが、私はcomponentWillReceiveProps方法でDOMへのシグナリングせずにこれを行う方法を探しています：

export default class Example extends React.Component { 

constructor(props){ 
    super(props); 
    this.state = {title: props.arr.question}; 
}; 

componentWillReceiveProps(nextProps){ 
    if(nextProps.arr.question !== this.state.title){ 
    let id = "question" + this.props.arr.key; 
    document.getElementById(id).value = nextProps.arr.question; 
    this.setState({title: nextProps.arr.question}); 
    } 
} 
    render(){ 

    return(<div> 
<input type="text" id={"question" + this.props.arr.key} defaultValue={this.state.title} placeholder="Enter your title."/> 
      </div> 
     ) 
    } 
} 

私は時の状態が変化し、Iは入力変化を見ることができますということでしたと仮定何同じように。実際には、何らかの理由で入力フィールド以外の要素で発生します。だから私は作品がcomponentWillReceivePropsメソッドでDOMを参照しているのを見つけたと思って、そのように変更すると思います。

私が気づいていないより良い方法がありますか？

Answer 1

を入力すると、入力値の値を直接stateに設定することで、制御されたコンポーネントを作成することができます。 my answer hereをチェックしてください、アプリケーションは似ています。だから、基本的には、入力のための独立したコンポーネントを作成

export default class Example extends React.Component { 

constructor(props){ 
    super(props); 
    this.state = {title: props.arr.question}; 
    this.handleTitleChange = this.handleTitleChange.bind(this); 
    // ^--necessary to be able to call setState 
}; 

handleTitleChange(e){ 
    this.setState({title: event.target.value}); 
    // this updates the state as the user types into the input 
    // which also causes a re-render of this component 
    // with the newly update state 
} 
render(){ 

    return(
    <div> 
     <input type="text" 
     id={"question" + this.props.arr.key} 
     defaultValue={this.state.title} 
     placeholder="Enter your title." 
     onChange={this.handleTitleChange} // to handle the change 

     value={this.state.title}/> // here is where you set 
            // the value to current state 
    </div> 
) 
}