Question

我正在尝试在todo数组中传递2个元素，但是它只返回term元素值。我在控制台中没有看到错误。

似乎

   items: [...this.state.items, this.state.term, this.state.name ]

仅接受两个参数。

我目前正在关注

https://reactjs.org/docs/handling-events.html

const { Component } = React;

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      term: '',
      name: '',
      items: []
    };
  }

  onChange = (event) => {
    this.setState({name: event.target.value, term: event.target.value});

  }

  onSubmit = (event) => {
    event.preventDefault();

    this.setState({
      term: '',
      name: '',
      items: [
        ...this.state.items,
        this.state.term,
        this.state.name
      ]
    });

  }

  render() {
    return (
      <div>

        <form className="App" onSubmit={this.onSubmit}>
          <input value={this.state.term} onChange={this.onChange}/>
          <input value={this.state.name} onChange={this.onChange}/>
          <button>Submit</button>
        </form>

        <pre>{JSON.stringify(this.state.items)}</pre>

      </div>
    );
  }

}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

我怀疑您要问的问题是您的onChange事件会同时更新term和name，而您在一个输入中键入的内容都会输入到另一个输入中。解决方法如下：

向您的name添加一个input属性，该属性与状态中的键相对应。
访问name中onChange的值，并相应地更新该值。

解决方案

const { Component } = React;

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      term: '',
      name: '',
      items: []
    };
  }

  onChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });

  }

  onSubmit = (event) => {
    event.preventDefault();

    this.setState({
      term: '',
      name: '',
      items: [
        ...this.state.items,
        this.state.term,
        this.state.name
      ]
    });

  }

  render() {
    return (
      <div>

        <form className="App" onSubmit={this.onSubmit}>
          <input name="term" value={this.state.term} onChange={this.onChange}/>
          <input name="name" value={this.state.name} onChange={this.onChange}/>
          <button>Submit</button>
        </form>

        <pre>{JSON.stringify(this.state.items)}</pre>

      </div>
    );
  }

}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

我认为您的this.setState对于您的示例没有任何问题。

您似乎误用了this.onChange。

我更改了其实现，以便两个输入都可以有各自的处理程序。

onChange =键=>事件=> { this.setState（{[key]：event.target.value}）; };

还更改了输入回调以从下面的render函数传递键值。

  render() {
    const { term, name, items } = this.state;
    return (
      <div>
        <form className="App" onSubmit={this.onSubmit}>
          <input value={term} onChange={this.onChange('term')} />
          <input value={name} onChange={this.onChange('name')} />
          <button>Submit</button>
        </form>

        {items.join(", ")}
      </div>
    );
  }
}

您之前的代码存在问题，即您在任何输入框中键入的内容都会使名称和术语具有相同的值。

反应将不允许我推动两个要素

2 个答案:

解决方案