為什么我在響應中從受控輸入切換到非受控輸入

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事件的處理程序中的錯誤而發生警告。

受控組件需要onChange事件的處理程序。 這允許組件更新其值。 如果處理程序不起作用，則無法通過props更新該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});
}