Как выбрать значение поля ввода React JS с помощью Axios - PullRequest
Новая
       4

Как выбрать значение поля ввода React JS с помощью Axios

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

Я создаю форму в реакции js и мне нужно выбрать значения поля ввода, используя Ax ios. 

 axios({ 
        method: 'post', 
        url: '/admin/escalations/newUser', 
        // how to fetch userEmail from the form
        data: { userEmail: this.state.userEmail

         } 
        })
}

Фрагмент формы 

<label for="userEmail">Email ID: </label><br/>
<input type="text" id="userEmail" name="userEmail" value={this.userEmail} placeholder="Meltwater email ID" />

Пожалуйста, предоставьте решение на вышеуказанный вопрос

Ответы [ 3 ]

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

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

class someClass extends React.Component{
  ~~~
  ~~~
 state : {
  userEmail : ''
 }

 takeEmailValue(e) { this.setState({ userEmail: e.target.value })}

 // add the onChange event on your input field

 <label for="userEmail">Email ID: </label><br/>
 <input type="text" id="userEmail" name="userEmail" onChange={this.takeEmailValue} placeholder="Meltwater email ID" />
}
0 голосов
/ 04 марта 2020

В конструкторе компонентов вы должны объявить свое состояние следующим образом: 

constructor(){
   super()
   this.state = {
      userMail: ""
   }
}

Как только вы это сделаете, мы создадим функцию для обновления значения userMail. 

updateMail(event){
   this.setState({
      userMail: event.target.value
   }, () => console.log(this.state.userMail)
}

Наконец, вам просто нужно указать эту функцию в вашем входном теге следующим образом: 

<label for="userEmail">Email ID: </label><br/>
<input type="text" id="userEmail" name="userEmail" onChange={this.updateMail.bind(this)} placeholder="Meltwater email ID" />

Таким образом, функция updateMail будет, как указывает ее имя, обновлять состояние userMail каждый раз время, когда вы меняете значение ввода.

Благодаря этому состояние userMail будет обновляться при каждом нажатии клавиши на входе.

Затем вы можете повторно используйте ваш метод топора ios, чтобы опубликовать это значение.

Я надеюсь, это поможет вам.

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

Вы должны добавить this.setState в атрибуты onChange и значение this.state.userEmail для ввода выглядит следующим образом: 

<input type="text" id="userEmail" name="userEmail" value={this.state.userEmail} placeholder="Meltwater email ID" onChange={e => this.setState({userEmail: e.target.value})}/>

, надеюсь, оно будет работать

...