なぜコントロールから制御されていない入力から反応に切り替えるのですか

Question

私はスイッチを制御されていない入力警告にしています。 this.state.lineItemNameは私のコンストラクタで定義されています。これは私が読んだ他の質問からの主なミスです。

これは、Reactの実装であるtodoMVCと非常によく似ています。

Answer 1

class LineItemForm extends React.Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     newLineItem: "" 
     } 
    } 

    render() { 
    return(
     <tr> 
     <td> 
      <input type="text" 
      onChange={this.handleChange.bind(this)} 
      onKeyDown={this.handleKeyDown.bind(this)} 
      value={this.state.newLineItem} 
      placeholder="Search for an item..." 
      autoFocus={true} 
      /> 
     </td> 
     </tr> 
    ); 
    } 

    handleChange(e) { 
    this.setState({newLineItem: event.target.value}); 
    } 

    handleKeyDown(e) { 
    if (e.keyCode === this.props.ENTER_KEY_CODE || e.keyCode === this.props.TAB_KEY_CODE) { 
     e.preventDefault(); 

     let name = e.target.value.trim(); 

     if (name) { 
     let lineItem = { 
      name: name 
     }; 
     this.props.createLineItem(lineItem, this.props.sectionId) 
     this.setState({newLineItem: ""}) 
     } 
    } else { 
     return; 
    } 
    } 
} 

LineItemForm.defaultProps = { 
    ENTER_KEY_CODE: 13, 
    TAB_KEY_CODE: 9 
} 

使用

handleChange(event) { this.setState({newLineItem: event.target.value}); }

代わりに

handleChange(e) { 
    this.setState({newLineItem: event.target.value}); 
} 

Answer 2

警告が理由onChangeイベントのハンドラのエラーが原因で発生します。

Controlled componentsには、onChangeイベントのハンドラが必要です。これにより、コンポーネントはその値を更新できます。ハンドラが機能しない場合は、valueをprops経由で更新することはできず、ユーザが入力した値で設定する必要があります。

このエラーを修正するには、あなたが定義したonChangeイベントハンドラでエラーを修正する必要があります：

// Parameter was renamed to 'event' to reflect its use in the 
// 'setState' method call below 
handleChange(event) { 
    this.setState({newLineItem: event.target.value}); 
}