通常在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>
但是在这一点上我也有疑问,
我不知道如何使用多个文本输入正确执行此操作:
您可以创建多个无效的特定更改处理程序,
您可以使用开关进行更改处理程序以设置属性
在输入字段上更改句柄是否有效?因为我只想在单击按钮时输入字段的值。
这是我正在谈论的形式。
那么,如何在单击按钮时使用React正确获取多个输入数据?
谢谢您的帮助!
答案 0 :(得分:2)
假设您正在寻找状态值
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>
')
}
答案 1 :(得分:2)
是的...您正在为您的案例为每个输入创建更改处理程序效率不高,您需要的是一个反应形式并提交选项,您不能使用旧表单,因为它需要更新页面以检索值。
我建议您使用Antd形式witch给您所有组件,甚至建议您使用他们的Input组件,witch看起来非常漂亮,并且处理得很好。 Antd Design(用于响应的用户界面组件)-Antd 一些示例代码。 试试看 !!! CodeSandbox
答案 2 :(得分: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>
)
}
请注意,该名称应与状态键匹配。