Javascript ReactJS表单呈现每个文本输入更改

我的问题是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>
    );
  }
}

从“React”导入React；
从“Web3”导入Web3；
//使用运行testrpc的url声明以太坊客户端（正在初始化）
var ETHEREUM_CLIENT=new Web3（new Web3.providers.HttpProvider（“http://localhost:8545"))
//这些可以通过输入字段动态添加，但现在是硬编码
var peopleContractABI=[{“常量”：true，“输入”：[]，“名称”：“getPeople”，“输出”：[{“名称”：“，“类型”：“bytes32[]”，{“名称”：“类型”：“bytes32[]”，{“名称”：“，“类型”：“bytes32[]”，“应付款”：false，“类型”：“函数”}，{“常量”：true，“输入”：[{“名称”：“类型”：“uint256”}，，“姓名”：“人”，“输出”：“{“名称”：“名字”：“firstName”，“类型”：“bytes32”；“bytes32”}，{“名称”：“lastName”，“type”：“bytes32”}，{“name”：“email”，“type”：“bytes32”}]，“paid”：false，“type”：“function”}，{“constant”：false，“inputs”：[{“name”：“{u firstName”，“type”：“bytes32”}，{“name”：“email”，“type”：“bytes32”}]，“name”：“addPerson”，“outputs”：[{“name”：“success”，“type”：“bool”}]，“paid”；“fall”；“function”：“function”}]
变量peopleContractAddress='0xa0b4dccf81cb4bc6cdb890637dc02b62a7a35b66'
var peopleContract=ETHEREUM_CLIENT.eth.contract（peopleContractABI）.at（peopleContractAddress）
//需要创建一个名为accounts的变量才能知道哪个帐户
//进行交易
var账户=以太坊_客户端.eth.accounts
//为用户创建动态输入字段以输入其数据
导出类表单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“，
电邮：“，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange（事件、键）{
this.setState（{[key]：event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交用户：”+this.state.firstName+this.state.lastName+this.state.email）；
event.preventdefault（）；
}
/*创建，以便可以添加该人员
组件willmount（）{
这是我的国家({
名字：this.state.firstName，
lastName:this.state.lastName，
电子邮件：this.state.email
})
}
*/
render（）{
peopleContract.addPerson（this.state.firstName，this.state.lastName，this.state.email，{from:accounts[1]，gas:3000000}）
返回(
名称
this.handleChange（事件'firstName'）}/>
姓
this.handleChange（事件'lastName'）}/>
电子邮件
this.handleChange（事件，'email'）}/>
);
}
}

问题在于，当用户开始在“输入已更改”状态下键入每个新键时，组件调用render方法

好主意是搬家

peopleContract.addPerson（this.state.firstName，this.state.lastName，this.state.email，{from:accounts[1]，gas:3000000}）

外部渲染方法

而在这个.handleChange方法中，您可以根据event.target.value和state来决定是否调用peopleContract.addPerson。并设置新的状态。我想您正在尝试一些类似自动完成的操作

---

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

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

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

//使用运行testrpc的url声明以太坊客户端（正在初始化）

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>
    );
  }
}

var peopleContractABI=[{“常量”：true，“输入”：[]，“名称”：“getPeople”，“输出”：[{“名称”：“，“类型”：“bytes32[]”，{“名称”：“，”type:“：”bytes32[]”，，“应付”：false，“类型”：“函数”}，{“常量”：true，“输入”：[{“名称”：“，”type:“uint256”}]，“名称”：“人”，“输出”：“{“名称”：“名字”：“firstName”，“type”：“bytes32”}，{lastName，type:“bytes32”}，{“name”：“email”，“type:“bytes32”}]，“payment”：false，“type:“function”}，{“constant”：false，“inputs:“{”name:“{”firstName”，“type:“bytes32”}，{”name:“bytes32”}，{“name:“email”，“type:“bytes32”}]，“name:“addPerson”，“outputs:“[{”name:“success”，“type:“bool”}]，“payment:“function:“function”}]
变量peopleContractAddress='0xa0b4dccf81cb4bc6cdb890637dc02b62a7a35b66'
var peopleContract=ETHEREUM_CLIENT.eth.contract（peopleContractABI）.at（peopleContractAddress）
//需要创建一个名为accounts的变量才能知道哪个帐户
//进行交易
var账户=以太坊_客户端.eth.accounts
//为用户创建动态输入字段以输入其数据
导出类表单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“，
电邮：“，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange（事件、键）{
this.setState（{[key]：event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交用户：”+this.state.firstName+this.state.lastName+this.state.email）；
event.preventdefault（）；
}
/*创建，以便可以添加该人员
组件willmount（）{
这是我的国家({
名字：this.state.firstName，
lastName:this.state.lastName，
电子邮件：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}）
返回(
名称
this.handleChange（事件'firstName'）}/>
姓
this.handleChange（事件'lastName'）}/>
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>
    );
  }
}