Каков наилучший способ получить значения текстового поля при нажатии кнопки в React?
Обычно в 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>
В других темах stackru я видел такие примеры:
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>
Но у меня тоже есть свои вопросы,
Я не знаю, как сделать это правильно с несколькими текстовыми вводами:
Вы можете сделать несколько конкретных обработчиков изменений, что неэффективно,
Вы можете сделать обработчик изменений с помощью переключателя, чтобы установить свойства
Эффективно ли даже изменение дескриптора на полях ввода? Потому что я просто хочу значения поля ввода при нажатии кнопки..
Это форма, о которой я говорю.
Итак, как правильно получить множественные входные данные с React, когда кнопка нажата?
Заранее спасибо за помощь!
3 ответа
Я думаю, что сначала вы должны добавить 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>
)
}
Обратите внимание, что имя должно соответствовать ключу состояния.
Предполагая, что вы можете искать значения состояния
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>
')
}
И да... вы правы, создавая обработчики изменений для каждого ввода, это неэффективно в вашем случае, вам нужна форма реагирования, которая дает вам старые параметры и варианты отправки, вы не можете использовать старую форму, потому что она должна обновить страницу до получить значения.
Я предлагаю вам использовать форму Antd, которая дает вам все компоненты, я даже предлагаю вам использовать их компоненты ввода, которые выглядят очень красиво и хорошо справляются. Antd Design (компоненты пользовательского интерфейса для реагирования) - Antd пример кода. попробуй!!! CodeSandbox