爲什麼我從受控輸入切換到不受控輸入

Question

我不知道爲什麼我要從受控輸入警告切換到非受控輸入警告。 this.state.lineItemName在我的構造函數中定義，這似乎是我讀過的其他SO問題的主要錯誤。

這與React的todoMVC實現非常相似。

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 
} 

Answer 1

使用

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

，而不是

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

Answer 2

警告是因爲在處理程序onChange事件中的錯誤。

Controlled components需要onChange事件的處理程序。這允許組件更新其值。如果處理程序不起作用，則value無法通過道具進行更新，必須通過用戶輸入的值進行設置。

要修正這個錯誤，你需要糾正錯誤在您定義的onChange事件處理程序：

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