1
ユーザーが登録フォームに記入できるようにアプリケーションを作成しています。このユーザーの名前とその他のパラメータがReact JSを使用して表示されます。これはスマート契約からも得られます。私はテキスト入力に入力した後に未定義の入力があるという問題を抱えています。それは状態と関係がありますが、それを修正する方法がわからないと思われます。React JS：ユーザーからの入力を取得できず、入力時に未定義になる
import React, { Component } from 'react';
import logo from './logo.svg';
import dxclogo from './dxclogo.png';
import './App.css';
import Web3 from 'web3';
import _ from 'lodash'
import { Form } from './Form';
//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":"age","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"bytes32"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}]
var peopleContractAddress = '0x7d58e54b812b1f7c5c47f0a85af5f9f6a1d3f5c8'
var peopleContract = ETHEREUM_CLIENT.eth.contract(peopleContractABI).at(peopleContractAddress)
class App extends Component{
constructor(props){
super(props);
this.state = {
firstNames: [],
lastNames: [],
ages: []
}
}
componentWillMount(){
var data = peopleContract.getPeople()
this.setState({
firstNames: String(data[0]).split(','),
lastNames: String(data[1]).split(','),
ages: String(data[2]).split(',')
})
}
render() {
var TableRows = []
_.each(this.state.firstNames, (value, index) => {
TableRows.push(
<tr>
<td>{ETHEREUM_CLIENT.toAscii(this.state.firstNames[index])}</td>
<td>{ETHEREUM_CLIENT.toAscii(this.state.lastNames[index])}</td>
<td>{ETHEREUM_CLIENT.toAscii(this.state.ages[index])}</td>
</tr>
)
})
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<img src = {dxclogo} className ="App-dxclogo" alt="dxclogo" />
<h1>Hotel Room Booking dApp</h1>
</div>
<div>
<Form />
<table className="App-tablePeople">
<thead>
<tr>
<th>First Name </th>
<th>Last Name </th>
<th>Age </th>
</tr>
</thead>
<tbody>
{TableRows}
</tbody>
</table>
</div>
</div>
);
}
}
export default App;
子
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":"age","type":"bytes32"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_firstName","type":"bytes32"},{"name":"_lastName","type":"bytes32"},{"name":"_age","type":"bytes32"}],"name":"addPerson","outputs":[{"name":"success","type":"bool"}],"payable":false,"type":"function"}]
var peopleContractAddress = '0x7d58e54b812b1f7c5c47f0a85af5f9f6a1d3f5c8'
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: "",
age: "",
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({firstName: event.target.firstName});
this.setState({lastName: event.target.lastName});
this.setState({age: event.target.age});
}
handleSubmit(event) {
alert('A user was submitted: ' + this.state.firstName + this.state.lastName + this.state.age);
event.preventdefault();
}
//Creating so that person can be added
componentWillMount(){
peopleContract.addPerson(this.state.firstName, this.state.lastName, this.state.age, {from: accounts[1], gas: 3000000})
}
render() {
return(
<form onSubmit={this.handleSubmit}>
<h4>Name</h4>
<input
type="text"
placeholder="Name, e.g. Javier"
firstName={this.state.firstName}
onChange={this.handleChange} />
<div>
<h4>Last Name</h4>
<input
type="text"
placeholder="Last Name, e.g. Hernandez"
lastName={this.state.lastName}
onChange={this.handleChange}/>
</div>
<div>
<h4>Age</h4>
<input
type="text"
placeholder="Age, e.g. 35"
age={this.state.age}
onChange={this.handleChange}/>
</div>
<input
type = "submit"
name = "Submit"
/>
</form>
);
}
}
'' event.target.firstName''はどうなっていますか？私はあなたが 'event.target.value'を意味すると思います – azium
' firstName'はコード内の 'value'と同じものであることを意味します。それは私が思ったものです – jh5614
' event.target'はDOMノードを参照しています。 'firstName'プロパティはありません。 'event.target.value'を使用して、値が入ってくるのを確認してください。 – azium