反应简单使用ref回调的例子

Question

我可以请你使用react ref回调吗？我想看看，如何在使用ref回调按下某个按钮后获取输入值，因为我没有得到它，我找不到一些完整的例子。

例如，我有一些输入姓氏和按钮提交的表格。这个按钮调用函数表示控制台日志输入的姓氏值。我该怎么办？

Answer 1

你走了。

class App extends Component {
  constructor(props) {
    super(props);
  }

  submit = () => {
    // get ref value
    const surname = this.surname.getValue();
    console.log('surname===>',surname)
  }

  render() {
    return (
      <div>
        {/* surname field */}
        <input 
          type='text' 
          ref=((ref) => this.surname = ref)
          placeholder='enter your surname'/>
        {/* submit button */} 
        <input type="submit" value="Submit" onClick={this.submit}>
      </div>
    )
  }
}