输入元素不应从受控制的ReactJs错误切换到不受控制的错误 [英] Input elements should not switch from controlled to uncontrolled ReactJs error

问题描述

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

I'm trying to handle changes in my form. I have title, description, and category.

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

The first input(title) -> Unable to type in the field.

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

The second input(description) -> Able to type in field but result is undefined.

第3个输入（类别DDL） - >无法更改所选类别，但默认选择正在输出我的遗憾是'喝';

The 3rd input(category DDL) -> Unable to change selected category, but default selected is being outputted in my alret as 'drink';

问题：

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

AddDeal is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我在这里查看了反应文档在受控制的组件上但发现它很难理解，因为我是新手。

I have viewed the react document here on controlled components but finding it hard to understand as I'm new to it.

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>
    );
  }
}

为什么这么难以获取输入？我应该使用道具而不是州吗？谢谢。

Why is this so hard to grab inputs? Should I be using props instead of state? Thanks.

推荐答案

问题在于 onChange函数，你使用的是普通的onChange函数所以不是用相同的值更新所有更新特定的状态值。

Problem is in onChange function, you are using common onChange function so instead of updating all with same value update the specific state value.

使用此功能：

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

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

Use name property to update the specific state, and you need to define the name='category' with select field.

检查工作示例：

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'/>

这篇关于输入元素不应从受控制的ReactJs错误切换到不受控制的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！