为什么我从受控输入切换到不受控输入

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}); 
}