Каков наилучший способ получить значения текстового поля при нажатии кнопки в React?

Question

Обычно в HTML вы делаете что-то вроде этого:

<form> 
    <input type="text"/>
    <input type="text"/>
    <input type="submit"/>
</form>

Я считаю, что это не React-способ сделать это.

Еще один способ сделать то, что я делал в своем приложении, это не самый лучший способ сделать это, я верю.Как это:

buttonclickRequest(){
  var reasonn = document.getElementById("testControl").value;
}

<div>
   <FormControl id="testControl"/>
   <Button id="btnRequest" onClick={this.buttonclickRequest}/>
</div>

В других темах stackoverflow я видел примеры, подобные этому:

constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    place: '',
    address: '',
    email: '',
    phoneNumber: ''
  };
}
handleClick() {
  //do something
}

handleChange = (e) => {
  this.setState({
     [e.target.id]: e.target.value
  })
}

<div>
   <input type="text" onChange={e => this.handleChange(e)}/>
   <button type="submit" onClick={this.handleClick}/>
</div>

Но у меня также есть свои вопросы на данный момент,

Я не знаю, как сделать это правильно с несколькими текстовыми вводами:

1. Вы можете сделать несколько конкретных обработчиков изменений, которые неэффективны,

2. Вы можете создать обработчик изменений с переключателем, чтобы установить свойства

Насколько эффективно сделать изменение дескриптора в полях ввода?Потому что я просто хочу значения поля ввода при нажатии кнопки ..

Это форма, о которой я говорю.

Так как правильно получить множественные входные данные с помощью React при нажатии кнопки?

Заранее спасибо за помощь!

Answer 1

и да ... вы правы, создавая обработчики изменений для каждого ввода это неэффективно в вашем случае, что вам нужно - это форма реагирования , которая дает вам старое и отправитьопций, вы не можете использовать старую форму, потому что она должна обновить страницу для получения значений.

Я предлагаю вам использовать форму Antd, которая дает вам все в компонентах, я даже предлагаю вам использовать их компоненты ввода с видомочень красиво и хорошо справляется.Antd Design (компоненты пользовательского интерфейса для реагирования) - Antd некоторый пример кода.попробуй !!! CodeSandbox

Answer 2

Я думаю, что сначала вы должны добавить атрибут name в поле ввода и использовать имя, чтобы установить состояние, а затем использовать состояние для handleClick:

constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    place: '',
    address: '',
    email: '',
    phoneNumber: ''
  };
}
handleClick = () => {
  //do something
  console.log(this.state);
  // should be something like this {
  //  firstName: '',
  //  lastName: '',
  //  place: '',
  //  address: '',
  //  email: '',
  //  phoneNumber: ''
  //}
}

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

render() {
  return(
    <div>
      <input type="text" name="firstName" onChange={this.handleChange}/>
      <input type="text" name="lastName" onChange={this.handleChange}/>
      <button type="submit" onClick={this.handleClick}/>
    </div>
  )
}

Обратите внимание, что имя должно совпадатьгосударственный ключ.

Answer 3

Предположим, вы ищете значения состояния

constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    place: '',
    address: '',
    email: '',
    phoneNumber: ''
  };
}
handleClick() {
  console.log("State ==>", this.state);
}

setFirstName = (e) => {
  this.setState({
     firstName: e.target.value
  })
}

setPhoneNumber = (e) => {
  this.setState({
     phoneNumber: e.target.value
  })
}

render(){
return('
<div>
   <label> First Name </label>
   <input type="text" name="firstName" onChange={e => this.setFirstName(e)}/>
   <label> Phone Number </label>
   <input type="text" name="phoneNumber" onChange={e => this.setPhoneNumber(e)}/>
   <button type="submit" onClick={this.handleClick}/>
</div>
')
}