ReactJS表单呈现每个文本输入的变化

Question

我遇到的问题是我在render（）中有一个函数会输出每个输入文本，也就是说，它会逐字逐句打印而不是逐字打印。我试图将函数放在render（）之外但是它不起作用。这是代码：

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 = '0xa0b4dccf81cb4bc6cdb890637dc02b62a7a35b66'

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{
  constructor(props){
  super(props);
  this.state = {
    firstName: "",
    lastName: "",
    email: "",
  }

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

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

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


/*Creating so that person can be added
  componentWillMount(){
     this.setState({
       firstName: this.state.firstName,
       lastName: this.state.lastName,
       email: this.state.email
     })
 }
 */

  render() {
    peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})
    return(
      <form onSubmit={this.handleSubmit}>
      <h4>Name</h4>
        <input
          type="text"
          placeholder="e.g. Bob"
          value={this.state.firstName}
          onChange={event => this.handleChange(event, 'firstName')}  />
        <div>
        <h4>Last Name</h4>
          <input
            type="text"
            placeholder="e.g. Stark"
            value={this.state.lastName}
            onChange={event => this.handleChange(event, 'lastName')}/>
        </div>
        <div>
        <h4>Email</h4>
          <input
            type="text"
            placeholder="e.g. bobstark@gmail.com"
            value={this.state.email}
            onChange={event => this.handleChange(event, 'email')}/>
        </div>
        <input
          type = "submit"
          name = "Submit"
          />
      </form>
    );
  }
}

Answer 1

问题是当用户开始在输入更改状态下键入每个新键并且组件调用render方法时。

好主意是移动

peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})

外部渲染方法。

比在this.handleChange方法中你可以根据event.target.value和state决定是否调用peopleContract.addPerson。并设置新的状态。我想你正在尝试做一些像自动完成？

但是如果您需要填充字段来调用peopleContract.addPerson，您可以在handleSubmit中执行此操作。

Answer 2

你需要在某个方法中调用这个函数。您应该在生命周期方法中执行此操作。

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

//使用运行testrpc的url声明ethereum客户端（初始化）

var ETHEREUM_CLIENT = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))

//这些可以通过输入字段动态添加，但现在是硬编码

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 = '0xa0b4dccf81cb4bc6cdb890637dc02b62a7a35b66'

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{
  constructor(props){
  super(props);
  this.state = {
    firstName: "",
    lastName: "",
    email: "",
  }

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

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

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


/*Creating so that person can be added
  componentWillMount(){
     this.setState({
       firstName: this.state.firstName,
       lastName: this.state.lastName,
       email: this.state.email
     })
 }
 */


  componentDidMount(){
        peopleContract.addPerson(this.state.firstName, this.state.lastName,     this.state.email, {from: accounts[1], gas: 3000000})
 }


  render() {
   // peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})
    return(
      <form onSubmit={this.handleSubmit}>
      <h4>Name</h4>
        <input
          type="text"
          placeholder="e.g. Bob"
          value={this.state.firstName}
          onChange={event => this.handleChange(event, 'firstName')}  />
        <div>
        <h4>Last Name</h4>
          <input
            type="text"
            placeholder="e.g. Stark"
            value={this.state.lastName}
            onChange={event => this.handleChange(event, 'lastName')}/>
        </div>
        <div>
        <h4>Email</h4>
          <input
            type="text"
            placeholder="e.g. bobstark@gmail.com"
            value={this.state.email}
            onChange={event => this.handleChange(event, 'email')}/>
        </div>
        <input
          type = "submit"
          name = "Submit"
          />
      </form>
    );
  }
}

Answer 3

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 = '0xa0b4dccf81cb4bc6cdb890637dc02b62a7a35b66'

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{
  constructor(props){
  super(props);
  this.state = {
    firstName: "",
    lastName: "",
    email: "",
  }

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event, key) {
    this.setState({[key]: 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 vlaues clear state 
        this.setState({
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            email: this.state.email
        })
    }else{
        // render error 
        alert('Some fileds are mandatory');
    }
}


/*Creating so that person can be added
  componentWillMount(){
     this.setState({
       firstName: this.state.firstName,
       lastName: this.state.lastName,
       email: this.state.email
     })
 }
 */

  render() {
    // Do not call this method here peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})
    return(
      <form onSubmit={this.handleSubmit}>
      <h4>Name</h4>
        <input
          type="text"
          placeholder="e.g. Bob"
          value={this.state.firstName}
          onChange={event => this.handleChange(event, 'firstName')}  />
        <div>
        <h4>Last Name</h4>
          <input
            type="text"
            placeholder="e.g. Stark"
            value={this.state.lastName}
            onChange={event => this.handleChange(event, 'lastName')}/>
        </div>
        <div>
        <h4>Email</h4>
          <input
            type="text"
            placeholder="e.g. bobstark@gmail.com"
            value={this.state.email}
            onChange={event => this.handleChange(event, 'email')}/>
        </div>
        <input
          type = "submit"
          name = "Submit"
          />
      </form>
    );
  }
}