reactjs - 在 React.js 中将对象添加到数组

Question

我知道这是一个简单的问题，但现在我正在努力解决这个问题。只是我试图将一个新对象添加到从输入中获取的数组中。这是渲染内部的简单表单：

render() {
  return (
    <div className="container">
      <form onSubmit={this.handleSubmitTopic}>
        <input onChange={this.handleTopicName} placeholder="add topic name" /><br />
        <input onChange={this.handleQ1} type="text" placeholder="add question" /><br />
        <input onChange={this.handleQ2} type="text" placeholder="add question" /><br />
        <button>Save</button>
      </form>
    </div>
  );
}

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

这是 onChange 句柄函数：

handleTopicName = (e) => {
    this.setState({ topicName: e.target.value });
  }

  handleQ1 = (e) => {
    const question = e.target.value;
    const qInput = {
      answer: 'no answer',
      question,
      questionId: uuid(),
    };
    const qArray = this.state.questions.slice();
    qArray.push(qInput);
    this.setState(prevState => ({ questions: qArray }));
  }

  handleQ2 = (e) => {
    const qInput = {
      answer: 'no answer',
      question: e.target.value,
      questionId: uuid(),
    };
    const qArray = this.state.questions.slice();
    qArray.push(qInput);
    this.setState(prevState => ({ questions: qArray }));
  }

  handleSubmitTopic = (e) => {
    e.preventDefault();
    this.props.onSaveTopic({
      topicName: this.state.topicName,
      questions: this.state.questions,
    });
  }

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

最后是状态：

state = {
  topicName: '',
  questions: [],
}

我尝试过像这样使用扩展运算符添加对象

this.setState({questions: [...this.state.questions, {here goes question object}]})

每次提交结果后，我都会得到一个包含我输入的每个字符的数组。

这是结果的屏幕截图：

我怎么解决这个问题？

标签： reactjs

Answer 1

使用 onBlur 事件而不是 onChange。OnBlur 在焦点离开输入元素时触发。onChange 事件在元素的值已更改时发生。

render() {
  return (
    <div className="container">
      <form onSubmit={this.handleSubmitTopic}>
        <input onBlur={this.handleTopicName} placeholder="add topic name" /><br />
        <input onBlur={this.handleQ1} type="text" placeholder="add question" /><br />
        <input onBlur={this.handleQ2} type="text" placeholder="add question" /><br />
        <button>Save</button>
      </form>
    </div>
  );
}