ReactJS：从表单获取输入

Question

我目前正在尝试使用 React 以表单形式从用户那里获取完整的输入。我需要获取这些输入，然后将它们存储起来，以便我可以将这些值传递给另一个函数。目前，我一直在尝试使用不受控制的输入但没有成功，但也尝试过受控输入但没有任何成功。有任何想法吗？我必须将这些值传递给函数peopleContract.addPerson(this._firstName, this._lastName, this._email, {from: accounts[1], gas: 3000000})

代码如下（注释为受控输入方式）：

import React from 'react';
import Web3 from 'web3';

//Declaring the ethereum client (initializing) with the url in which the testrpc is running
var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))

//These could be dynamically added through input fields, but hard coding for now
var peopleContractABI = [{"constant":true,"inputs":[],"name":"getPeople","outputs":[{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"},{"name":"","type":"bytes32[]"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"people","outputs":[{"name":"firstName","type":"bytes32"},{"name":"lastName","type":"bytes32"},{"name":"email","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_email","type":"bytes32"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}]

var peopleContractAddress = '0xb1a711f4e1250761b85be7bb4478c07d256b8225'

var peopleContract = ETHEREUM_CLIENT.eth.contract(peopleContractABI).at(peopleContractAddress)

//Need to create a variable named accounts in order to know which account
//to make the transactions from
var accounts = ETHEREUM_CLIENT.eth.accounts

//Creating the dynamic input fields for the user to input his/her data
export class Form extends React.Component{
  handleSubmitClick = () => {
    const firstName = this._firstName.value;
    const lastName = this._lastName.value;
    const email = this._email.value;
    //do something with these variables
  }

/*
  handleChange(event) {
    this.setState({[key]: event.target.value});
  }
*/

/*
  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleSubmit(event) {
    alert('A user was submitted: ' + this.state.firstName + this.state.lastName + this.state.email);
    event.preventdefault();
*/

/*
    if((this.state.firstName==!"") && (this.state.lastName==!"")&& (this.state.email==!"")){
        peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})

        // after you subimt values clear state
        this.setState({
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            email: this.state.email
        })
    }else{
        // render error
        alert('Some fields are mandatory');
    }
}
*/

/*
  componentWillMount(){
    peopleContract.addPerson(this._firstName, this._lastName, this._email, {from: accounts[1], gas: 3000000})
  }
  */


  render() {
    peopleContract.addPerson(this._firstName, this._lastName, this._email, {from: accounts[1], gas: 3000000})
    return(
      <form>
      <div>
        <h4>Name</h4>
          <input
            type="text"
            ref={input => this._firstName = input} />
      </div>
      <div>
        <h4>Last Name</h4>
          <input
            type="text"
            ref = {input2 => this._lastName = input2} />
      </div>
      <div>
        <h4>Email</h4>
          <input
            type="text"
            ref = {input3 => this._email = input3}  />
        </div>
        <button onClick={this.handleSubmitClick}>Submit</button>
      </form>
    );
  }
}

Answer 1

通过使用ref callback我们存储dom元素的引用，按照DOC：

当在 HTML 元素上使用 ref 属性时，ref 回调 接收底层 DOM 元素作为其参数。例如，这个 代码使用 ref 回调来存储对 DOM 节点的引用：

ref = { (input) => { this.textInput = input; }} />

要使用ref 获取不受控组件的值，您需要编写：

this._firstName.value,    //value

this._lastName.value,     //value

this._email.value         //value

另一个变化是从渲染方法中删除这一行：

peopleContract.addPerson(this._firstName, this._lastName, this._email, {from: accounts[1], gas: 3000000})

因为在初始渲染期间 ref 将不可用，所以在渲染之前尝试访问该值会引发错误。

ref 属性带有一个回调函数，回调将是 在组件安装或卸载后立即执行。

检查工作解决方案：

class Form extends React.Component{

  handleSubmitClick() {
    const firstName = this._firstName.value;
    const lastName = this._lastName.value;
    const email = this._email.value;
    console.log(firstName, lastName,email);
    peopleContract.addPerson(firstName, lastName, email, {from: accounts[1], gas: 3000000})
  }

  render() {
    return(
      <form>
      <div>
        <h4>Name</h4>
          <input
            type="text"
            ref={input => this._firstName = input} />
      </div>
      <div>
        <h4>Last Name</h4>
          <input
            type="text"
            ref = {input2 => this._lastName = input2} />
      </div>
      <div>
        <h4>Email</h4>
          <input
            type="text"
            ref = {input3 => this._email = input3}  />
        </div>
        <button onClick={this.handleSubmitClick.bind(this)}>Submit</button>
      </form>
    );
  }
}

ReactDOM.render(<Form/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

您正在尝试在渲染函数中分配引用之前使用它们。

您似乎想在提交时调用peopleContract.addPerson()，所以它应该是这样的

export class Form extends React.Component{
  handleSubmitClick = () => {
    const firstName = this._firstName.value;
    const lastName = this._lastName.value;
    const email = this._email.value;

    peopleContract.addPerson(firstName, lastName, email, {from: accounts[1], gas: 3000000})
  }
  render() {
    return(
      <form>
      <div>
        <h4>Name</h4>
          <input
            type="text"
            ref={input => this._firstName = input} />
      </div>
      <div>
        <h4>Last Name</h4>
          <input
            type="text"
            ref = {input2 => this._lastName = input2} />
      </div>
      <div>
        <h4>Email</h4>
          <input
            type="text"
            ref = {input3 => this._email = input3}  />
        </div>
        <button onClick={this.handleSubmitClick}>Submit</button>
      </form>
    );
  }
}