'Export React Form Values to Another JS File
I have a form set up with React Class Components. I want to take the values input by the user and send them to another file. These values will be parameters of an external function call. The values I can console these values declared as constants in the handleSubmit() function but do not know how to export them
import React, {Component} from 'react';
import "./styles.css";
class TokenForm extends React.Component {
constructor(props) {
super(props);
this.state = {
daoName: '',
tokenName: '',
tokenSymbol: '',
daoCap: '',
minEth: '',
maxEth: '',
mintRate: '1000'
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
const dName = event.target.daoName.value;
const tName = event.target.tokenName.value;
const tSymbol = event.target.tokenSymbol.value;
const dCap = event.target.daoCap.value;
const mnEth = event.target.minEth.value;
const mxEth = event.target.maxEth.value;
const mRate = event.target.mintRate.value;
console.log(dName, tName, tSymbol, dCap, mnEth, mxEth, mRate)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1>Mint DAO Token</h1>
<p>Customise your token variables below</p>
<input type="text" placeholder="DAO Name" name="daoName" value={this.state.daoName} onChange={this.handleInputChange}/>
<input type="text" placeholder="Token Name" name="tokenName" value={this.state.tokenName} onChange={this.handleInputChange}/>
<input type="text" placeholder="Symbol e.g. ABC" name="tokenSymbol" value={this.state.tokenSymbol} onChange={this.handleInputChange}/>
<input type="number" placeholder="DAO Max Capacity" name="daoCap" value={this.state.daoCap} onChange={this.handleInputChange}/>
<input type="number" placeholder="Minimum Investment Limit (ETH)" name="minEth" value={this.state.minEth} onChange={this.handleInputChange}/>
<input type="number" placeholder="Maximum Investment Limit (ETH)" name="maxEth" value={this.state.maxEth} onChange={this.handleInputChange}/>
<select name="mintRate" value={this.state.mintRate} onChange={this.handleInputChange}>
<option value="1000">1,000</option>
<option value="10000">10,000</option>
<option value="100000">100,000</option>
</select>
<button type="submit">SUBMIT</button>
</form>
);
}
}
export default TokenForm;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
