javascript - 为什么我在 react 中从受控输入切换为非受控输入

我不确定为什么要从受控输入切换为不受控制的输入警告。 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
}

最佳答案

采用

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

代替

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