javascript - 输入表单在reactjs中发送空白值

Question

我正在尝试使用react来console.log输入值。下面是我写的代码

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
  constructor() {
    super();
    this.processHand = this.processHand.bind(this);

  }

  processHand(e){
    e.preventDefault();
    const handMoneyReceived = this.handMoney.value;
    console.log(handMoneyReceived);

  }

  render(){
    return(
        <div>
          <form onSubmit = {this.processHand}>
            <input type="text"/>
            <input type="submit" ref= {ref => this.handMoney = ref}/>
          </form>
        </div>
      )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

console.log(handMoneyReceived) 正在注销空白值，而不是在表单上输入的值。

Answer 1

因为您在错误的字段上使用了 ref，请将其与文本字段一起使用，尝试以下操作:

<input type="text" ref= {ref => this.handMoney = ref}/>

检查工作fiddle:https://jsfiddle.net/mayankshukla5031/k1efLh8e/