How to get textbox values on button click in React? [duplicate]

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. javascript.info/event-delegation — wiesson
– wiesson, Commented Feb 13, 2020 at 9:08
Does this answer your question? How to get the value of an input field using ReactJS? — Gaurav Kandpal
– Gaurav Kandpal, Commented Feb 13, 2020 at 9:13

waqas Mumtaz · Accepted Answer · 2020-02-13 09:19:19Z

1

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

answered Feb 13, 2020 at 9:19

waqas Mumtaz

6744 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gaurav Kandpal · Accepted Answer · 2020-02-13 09:08:59Z

0

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

} }

answered Feb 13, 2020 at 9:08

Gaurav Kandpal

1,3403 gold badges16 silver badges35 bronze badges

Comments

Chris · Accepted Answer · 2020-02-13 09:09:46Z

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, 2020 at 9:09

answered Feb 13, 2020 at 9:08

Chris

59.7k20 gold badges121 silver badges144 bronze badges

3 Comments

wiesson Over a year ago

Why do you recommend using document.getElement by id here?

Chris Over a year ago

@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.

waqas Mumtaz Over a year ago

what if there are multiple inputs ?

Tiến Đạt Hoàng · Accepted Answer · 2020-02-13 09:23:02Z

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.

Collectives™ on Stack Overflow

How to get textbox values on button click in React? [duplicate]

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Related