javascript - 在 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

我认为首先您应该将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 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>
')
}

Answer 3

是的...您是正确的，为每个输入创建更改处理程序对您的案例效率不高，您需要的是一个反应表单，它为您提供旧和提交选项，您不能使用旧表单，因为它需要将页面更新为检索值。

我建议你使用 Antd 表单，它为你提供了所有的组件，我什至建议你使用他们的 Input 组件，它看起来非常漂亮并且处理得很好。Antd Design (User interface components for react) - Antd 一些示例代码。试试看 ！！！代码沙盒