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

Question

我不确定为什么会收到从受控输入警告切换到不受控输入警告。 this.state.lineItemName 在我的构造函数中定义，这似乎是我读过的其他 SO 问题的主要错误。

这与 todoMVC 非常相似React 的实现。

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(事件){
this.setState({newLineItem: event.target.value});
}

代替

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