Question

当我单击按钮上的提交时，只有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: []
};

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

Answer 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的更多详细信息。

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

Answer 3

我相信每次调用onChange函数时，状态都会被覆盖。如果使用散布运算符，则将保持状态的当前值而不会被覆盖。

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

对其他onChange也做同样的事情。

Answer 4

尝试这样

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

并像这样呼叫

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

两个输入未在React js表单上提交两个值

4 个答案: