两个输入没有在表单 React js 上提交两个值答案

【问题标题】：Two inputs not submitting both values on form React js两个输入没有在表单 React js 上提交两个值
【发布时间】：2018-10-02 16:52:46
【问题描述】：

当我单击按钮上的提交时，只有 1 个值被提交给对象，而不是两个。我已经计算出状态会正确更新，直到按下提交按钮并且只有 1 个值提交到 obj 中。

我使用过的功能如下：

  onChange = (event) => {
    this.setState({ term: {term1: event.target.value }});
  }

  onChange2 = (event) => {
    this.setState({ term: {term2: event.target.value }});
  }

  onSubmit = (event) => {
    event.preventDefault();
    let obj = {
        result1: this.state.term.term1,
        result2: this.state.term.term2,     
    };
    {console.log('obj', obj)}
    this.setState({
        term: {
            term1: '',
            term2: ''
        },
        items: [...this.state.items, obj]
    });
  }

我使用的渲染如下：

render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.term.term1} onChange={this.onChange} />
          <input value={this.state.term.term2} onChange={this.onChange2} />
          <button>Submit</button>
        </form>
        <List items={this.state.items} />
      </div>
    );
  }

我的状态结构如下：

this.state = {
  term: {
    term1: '',
    term2: ''
  },
  items: []
};

任何帮助都会很棒！谢谢！

【问题讨论】：

我刚刚在帖子中编辑了这个:)

标签： javascript reactjs forms

【解决方案1】：

这是因为您正在改变术语状态。您需要像这样更新状态：

onChange = (event) => {
  this.setState({ term: {...this.state.term, term1: event.target.value }});
}

对 onChange2 执行类似的方法。然后你会得到合并的术语：term1 和 term2。

您甚至可以像这样使用updater 回调：

onChange = (event) => {
  this.setState((prevState) => ({
     term: {
       ...prevState.term,
       term1: event.target.value
     }
  }))
 }

您甚至可以按照Henok 的评论为这两个更改定义单个处理程序：

onChange = (event, termNum) => {
  this.setState((prevState) => ({
     term: {
       ...prevState.term,
       [termNum]: event.target.value
     }
  }))
 }

并在您的 onChange 中通过响应 term1 或 term2 的 termNum：

onChange={this.onChange(term1)}
// there are sorts of methods to pass the parameter.

您可以查看我的另一篇帖子以获取有关using parameters 的更多详细信息。

【讨论】：

谢谢！这就像一种享受！据我了解，为什么需要添加 ...this.state.term？
如果没有展开运算符 (...)，您只需在每次调用 onChange 时替换术语对象，因此 term: {term1: 'something'} 变为 term: {term2: 'something else'}
您可以使用计算属性，而不是使用两种方法，onChange 和 onChange 2。 onChange = (event, termNum) => { this.setState({ term: {...this.state.term, [termNum]: event.target.value }}); }

【解决方案2】：

试试下面的变化

 onChange = (event) => {
      this.setState(prevState => ({
         term: {
            ...prevState.term,
           term1: event.target.value
         }
      }))
 }

 onChange2 = (event) => {
     this.setState(prevState => ({
         term: {
            ...prevState.term,
           term2: event.target.value
         }
     }))
 }

【讨论】：

【解决方案3】：

我相信每次调用 onChange 函数时，您的状态都会覆盖自身。如果您使用扩展运算符，您将保留当前的状态值而不会覆盖它。

onChange2 = (event) => {
    this.setState({ 
      term: {
        ...this.state.term,
        term2: event.target.value 
      }
    })
  }

对另一个 onChange 执行相同的操作，即使您也有。

【讨论】：

感谢您的解释！它的工作原理和赞赏:)

【解决方案4】：

这样试试

onSubmit = (value1, value2) = ev => {
   ev.preventDefault();
   console.log(value1,value2)
 }

然后这样调用

 <form onSubmit={this.onSubmit(this.state.term.term1,this.state.term.term2)}>

【讨论】：