javascript - What's the best way to get textbox values on button click in React? - Stack Overflow

admin管理员组

文章数量:1279119

Normally in HTML you do something like this:

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

I believe this is not the React way to do it.

Another way to do like i did in my app, is not the best way to do as well i believe. Like this:

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

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

In other stackoverflow topics I saw examples like this:

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>

But i have my questions at this point as well,

I don't know how to do this properly with multiple text inputs:

1. You can make multiple specific changehandlers which is inefficiënt,

2. You can make a changehandler with a switch to set the properties

Is it even efficient to do a handle change on the inputfields? Because I just want the inputfield values when the button is clicked..

This is the form I'm talking about.

So how to properly get the multiple input data with React, when the button is clicked?

Thanks for your help in advance!

Normally in HTML you do something like this:

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

I believe this is not the React way to do it.

Another way to do like i did in my app, is not the best way to do as well i believe. Like this:

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

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

In other stackoverflow topics I saw examples like this:

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>

But i have my questions at this point as well,

I don't know how to do this properly with multiple text inputs:

1. You can make multiple specific changehandlers which is inefficiënt,

2. You can make a changehandler with a switch to set the properties

Is it even efficient to do a handle change on the inputfields? Because I just want the inputfield values when the button is clicked..

This is the form I'm talking about.

So how to properly get the multiple input data with React, when the button is clicked?

Thanks for your help in advance!

• javascript
• reactjs
• react-native
• react-state-management
• react-state

Share Improve this question Follow edited Feb 12, 2019 at 8:55 Nagama Inamdar 2,8572222 gold badges4040 silver badges5050 bronze badges asked Dec 11, 2018 at 13:15 SaloméSalomé 32522 gold badges55 silver badges1818 bronze badges 3

• create a ponent for textbox. it maintains its own state and takes a callback on value change. your parent ponent can manage all child ponent states as the callback will be passed to textbox ponent – hannad rehman Commented Dec 11, 2018 at 13:20
• It is performant if you change a bit of code. You are currently creating a new function everytime you type something into the input (arrow func). Instead, you can do it this way: <input type="text" id="username" onChange={this.handleChange} />. – SkyzohKey Commented Dec 11, 2018 at 13:36
• found this link use setTimeout and Cleartimeout – Dhaval Pankhaniya Commented Jun 27, 2020 at 19:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I think first you should add name attribute to your input field and use the name to set the state and then use the state on 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>
  )
}

Note that the name should match the state key.

Assuming you may be looking for state values

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>
')
}

and yes... you are right creating change handlers for each input its not efficient on your case, what you need is a react form that gives you the old and submit options,you cant use old form because it needs to update the page to retrieve the values.

I Suggest you to use Antd form witch gives you all in ponents, i even suggest you to use their Input ponents witch look very nice and handles pretty well. Antd Design (User interface ponents for react) - Antd some sample code. give it a try !!! CodeSandbox

本文标签： javascriptWhat39s the best way to get textbox values on button click in ReactStack Overflow