Reactjs 如何在React中获取按钮单击时的文本框值？

我有这样一个简单的代码：

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

类应用程序扩展组件{
连接=异步（参数）=>{
//这里有一些代码
}
render（）{
返回(

区块编号：
这个.connect（）}>按钮

)
}
}

---

如何将输入值传递给Connect函数的参数？

< P>您应该考虑将输入控制为输入，而不是不受控制的输入。

无论如何，以下是基于现有解决方案的实现方法：

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

希望它对你有用

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

类应用程序扩展组件{
连接=异步（事件）=>{
event.preventDefault（）；
this.textInput.value；//您的值
}
render（）{
返回(

区块编号：
this.textInput=input}id=“input”/>
这个.connect（）}>按钮

)

}

---

}有多种方法。我想用状态来做

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

类应用程序扩展组件{
状态={
编号：“”
}
connect=async（）=>{
//这里有一些代码
警报（this.state.number）
}
render（）{
返回(

区块编号：
this.setState（{number:e.target.value}）}/>
这个.connect（）}>按钮

)
}
}
谢谢大家提出我的问题。我找到了这个

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

类应用程序扩展组件{
构造器（道具）{
超级（道具）
此.state={
值输入：“
}
}
connect=async（）=>{
设{valueInput}=this.state
//这里有一些代码
}
_onchange=evt=>{
this.setState（{valueInput:evt.target.value}）
}
render（）{
返回(

区块编号：





按钮

)
}
}

这对我来说非常有用。
与常规Javascript中的一样。查看事件接口的target属性。这能回答你的问题吗？为什么建议在此处使用document.getElement by id？@wiesson，因为输入组件不受控制。您需要直接访问DOM。当然可以使用refs，但它只是一个转义图案填充，也可以直接访问DOM。如果有多个输入呢？
    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>
        )
      }
    }