Как получить значение двух полей ввода одновременно в React? - PullRequest
Новая
       6

Как получить значение двух полей ввода одновременно в React?

0 голосов
/ 30 марта 2020

Вот форма, и я хочу получить значение имени и возраста, когда пользователь отправляет форму. 

<form>
    <input type='text' name='name'></input>
    <input type='number' name='age'></input>
   <input type='submit' />
</form>

1 Ответ

0 голосов
/ 30 марта 2020

Контролируемые компоненты (способ реагирования)

Вы можете сохранить оба значения в состоянии. Затем вы используете их в форме onSubmit.

См. https://reactjs.org/docs/forms.html

/* component init */
constructor(props) {
  super(props);
  this.state = {
    value1: '',
    value2: ''
  }
}
/* handle changes */
onChange1(event) {
  this.setState({ value1: event.target.value });
}

onChange2(event) {
  this.setState({ value2: event.target.value });
}

/* submit method */
  onSubmit(event) { 
    event.preventDefault(); 
    const value1 = this.state.value1;
    const value2 = this.state.value2;
    console.log(value1, value2);
  }

/* render */
<form onSubmit={this.onSubmit}> 
   <input type="text" value={this.state.value1} onChange={this.onChange1} /> 
   <input type="number" value={this.state.value2} onChange={this.onChange2} /> 
   <input type="submit" value="Submit" />
 </form>

Неконтролируемые компоненты (не способ React)

Если вы Если вы хотите использовать неконтролируемые компоненты (не храните значения yourswlf), вы должны использовать refs.

Подробнее о ссылках https://reactjs.org/docs/refs-and-the-dom.html. 

/* component init */
constructor(props) {
  super(props);
  this.input1 = React.createRef(); 
  this.input2 = React.createRef(); 
}

/* submit method */
  handleSubmit(event) { 
    event.preventDefault(); 
    const value1 = this.input1.current.value;
    const value2 = this.input2.current.value;
    console.log(value1, value2);
  }

/* render */
<form onSubmit={this.handleSubmit}> 
   <input type="text" ref={this.input1} /> 
   <input type="number" ref={this.input2} /> 
   <input type="submit" value="Submit" />
 </form>
...