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

【问题标题】：ReactJS form rendering each text input changeReactJS 表单呈现每个文本输入的变化
【发布时间】：2017-12-16 12:09:10
【问题描述】：

我有一个问题，我在 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>
    );
  }
}

【问题讨论】：

您只想在一个单词完成后才调用peopleContract.addPerson？似乎有点奇怪。人听起来像一个实体，你为什么要在每一个单词变化时都调用 add entity？
这是为了将用户的输入作为名字、姓氏和电子邮件添加到函数所需的参数中

标签： javascript reactjs rendering react-redux text-rendering

【解决方案1】：

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

好主意是移动

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 中执行此操作。

【讨论】：

如何在handleSubmit中添加一个条件来知道该字段何时完成？
当用户提交时。在提交方法中，您可以访问状态和您在状态中拥有的所有输入值。因此，您可以检查字段是否不为空。你可以显示错误或调用 peopleContract.addPerson。如果你想做一些类似自动完成的事情，你可以在 handleChange 中做到这一点。我不确定你需要做什么。
我需要获取用户在表单文本字段中输入的完整名字、姓氏和电子邮件，并将这些值传递给peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.email, {from: accounts[1], gas: 3000000})
我将在单独的答案中回答我可以在那里添加代码。

【解决方案2】：

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

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

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：

试试 this.setState({ ...state, state[key]: event.target.value});
你的意思是写在handleChange(event, key)？因为这样写会报错