How to get textbox values on button click in React?

Question

I have a simple code like this:

class App extends Component {
    connect = async (parameter) => {
      //some code here
    }
render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            <label>Block Number:</label>
            <input type="number" id="input"/>
            <button type="submit" onClick={() => this.connect()}>Button</button>
          </p>
        </header>
      </div>
    )
  }
}

How can I pass input value from input to connect function's parameter?

Same as in regular Javascript. Have a look at the target property of the Event interface. E.g. https://javascript.info/event-delegation — wiesson, Feb 13 '20 at 09:08
Does this answer your question? [How to get the value of an input field using ReactJS?](https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs) — Gaurav Kandpal, Feb 13 '20 at 09:13

score 1 · Accepted Answer · answered Feb 13 '20 at 09:19

There are various ways. I would like to do it using state.

class App extends Component {
  state = {
    number: ''
  }

  connect = async () => {
    //some code here
    alert(this.state.number)
  }
render() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          <label>Block Number:</label>
          <input type="number" id="input" value={this.state.number} onChange={ e => this.setState({number: e.target.value})}/>
          <button type="submit" onClick={() => this.connect()}>Button</button>
        </p>
      </header>
    </div>
  )
}
}

Chris · Answer 2 · 2020-02-13T09:09:46.827

0

You should consider making your input a controlled input, rather than an uncontrolled one.

Anyway, here is how to do that based on your existing solution:

<button type="submit" onClick={() => this.connect(document.getElementById("input").value)}>Button</button>

That being said, since you are on the same DOM tree, you could access it directly from connect without passing it as a parameter.

connect = async (parameter) => {
  document.getElementById("input").value;
  //some code here
}

edited Feb 13 '20 at 09:09

answered Feb 13 '20 at 09:08

Chris

57,622
19
111
137

1

Why do you recommend using document.getElement by id here? – wiesson Feb 13 '20 at 09:09
@wiesson Because the input component is uncontrolled. You need to access the DOM directly. You could use refs, sure, but it's just an escape hatch which also accesses the DOM directly. – Chris Feb 13 '20 at 09:10
what if there are multiple inputs ? – waqas Mumtaz Feb 13 '20 at 09:32

score 0 · Answer 3 · answered Feb 13 '20 at 09:08

Hope its work for you

class App extends Component {
    connect = async (event) => {
      event.preventDefault();
      this.textInput.value; // Your Value
    }
render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            <label>Block Number:</label>
            <input type="number" ref={(input) => this.textInput = input}  id="input"/>
            <button type="submit" onClick={() => this.connect()}>Button</button>
          </p>
        </header>
      </div>
)

} }

score 0 · Answer 4 · answered Feb 13 '20 at 09:23

Thank you all for awnsers my question. I found this

    class App extends Component {
        constructor(props) {    
        super(props)
        this.state = {
            valueInput:""
        }
    }
        connect = async () => {
          let {valueInput} = this.state
          //some code here
        }
       _onchange=evt=>{
            this.setState({valueInput:evt.target.value})
  }
    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                <label>Block Number:</label><br></br>
            <input type="number" id="input"  onChange={this._onchange}/><br></br>
            <button type="submit" onClick={ this.connect}>Button</button>
              </p>
            </header>
          </div>
        )
      }
    }

its work for me perfectly.

How to get textbox values on button click in React?

4 Answers4