javascript - 如何在 reactjs 版本 16.13.1 中获取输入文本的值

Question

我是 reactjs 的新手。我正在阅读如何获取输入值的文档。但我仍然收到未定义的错误。这就是我所做的。

class Test extends React.Component{
  constructor(props){
    super(props)
    this.inputRef = React.createRef()
  }
  clickHandler(){
    console.log(this.inputRef)
  }
  render(){
    return(
      <div>
        <input type="text" ref={this.inputRef}/>
        <button onClick={this.clickHandler}>click Me</button>
      </div>
    )
  }
}
ReactDOM.render(<Test />, document.getElementById('root'));

标签： javascriptreactjs

Answer 1

您的问题是您没有将 clickHandler 绑定到您的组件。

最简单的方法是使用箭头函数而不是类方法：

  clickHandler=()=>{
    console.log(this.inputRef)
  }

否则，在您的构造函数中，您需要手动绑定 clickHandler：

  constructor(props){
    super(props)
    this.inputRef = React.createRef()
    this.clickHandler = this.clickHandler.bind(this);
  }

这是使用箭头函数的示例（自动绑定）

class Test extends React.Component{
  inputRef = React.createRef()
  clickHandler=()=>{
    console.log(this.inputRef.current.value)
  }
  render(){
    return(
      <div>
        <input type="text" ref={this.inputRef}/>
        <button onClick={this.clickHandler}>click Me</button>
      </div>
    )
  }
}
ReactDOM.render(<Test />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>