我正在尝试处理表单中的更改。我有标题、描述和类别。

第一个输入（标题）-> 无法在该字段中输入。

第二个输入（描述）-> 能够在字段中输入但结果未定义。

第三个输入（类别 DDL）-> 无法更改所选类别，但默认选择在我的警报中输出为“饮料”；

问题：

AddDeal 正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。

我在此处查看了有关受控组件的 react 文档，但发现它很难理解，因为我是新手。

https://facebook.github.io/react/docs/forms.html#controlled-components

这是我的代码 AddDeal.js

export default class AddDeal extends React.Component {
  constructor(props) {
    super(props);

    // Set the state
    this.state = {
      title: '',
      description: '',
      category: 'technology'
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onSubmit(e) {
    e.preventDefault();

    alert('Title is: ' + this.state.title + 'Description is: ' + this.state.description + 'Category is: ' + this.state.category);
  }

  handleChange(e) {
    this.setState({
      title: e.target.title,
      description: e.target.description,
      category: e.target.value
    });
  }

  render() {
    return (
    <div>
      <h1>Add Deal</h1>
      <form onSubmit={this.onSubmit}>
        <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label>
        <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label>
        <select value={this.state.category} onChange={this.handleChange}>
            <option value="technology">Technology</option>
            <option value="food">Food</option>
            <option value="drink">Drink</option>
            <option value="books">Books</option>
          </select>
        <input type="submit" value="Submit"/>
      </form>
    </div>
    );
  }
}

为什么获取输入如此困难？我应该使用 props 而不是 state 吗？谢谢。