输入元素不应从受控转换为不受控制的ReactJs错误

小编典典

输入元素不应从受控转换为不受控制的ReactJs错误

reactjs

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

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

第二个输入（描述）->可以在字段中键入，但结果不确定。

第三输入（类别DDL）->无法更改所选类别，但默认情况下在我的提示中将其输出为“饮料”；

问题：

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

我在这里查看了有关受控组件的react文档，但是由于我是新手，因此很难理解。

https://facebook.github.io/react/docs/forms.html#受控组件

这是我的代码 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>
    );
  }
}

为什么这么难获取输入？我应该使用道具代替状态吗？谢谢。

阅读 173

2020-07-22

共1个答案

小编典典

问题出在onChange function，您正在使用通用的onChange函数，因此与其更新具有相同值的所有值，不如更新特定状态的值。

使用此功能：

handleChange(e) {
    this.setState({
        [e.target.name] : e.target.value
    }); 
}

使用 name属性更新特定状态 ，您需要定义name='category'with select字段。

检查工作示例：

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({

        [e.target.name] : 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 name='category' 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>

    );

  }

}



ReactDOM.render(<AddDeal/>, document.getElementById('app'))


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id='app'/>

2020-07-22