Два входа не передают оба значения в форму React js

Question

Когда я нажимаю кнопку «Отправить», объекту передается только 1 значение вместо обоих.Я разработал, что состояние обновляется правильно, пока не будет нажата кнопка отправки и только 1 значение передается в объект.

Я использовал следующие функции:

  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.Если вы используете оператор распространения, вы сохраните свои текущие значения состояния без перезаписи.

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

Сделайте то же самое для другого onChange, даже если у вас есть.

Answer 2

Попробуйте вот так

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

и звоните вот так

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

Answer 3

Попробуйте изменить ниже

 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 4

Это потому, что вы мутируете термин состояние.Вам необходимо обновить состояние, например:

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

И передайте termNum с отвечающим term1 или term2 в вашем onChange:

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

Вы можете проверить мой другой пост для получения дополнительной информации о , используя параметры .