如何使用redux以便我的表单值可以访问其他组件。目前我已经这样了:
import React, { Component } from 'react';
class AdminConfig extends Component{
constructor(props){
super(props);
this.state=({
payerName:'',
payerAddress:''
})
this.onPayerNameChange = this.onPayerNameChange.bind(this);
this.onPayerAddressChange = this.onPayerAddressChange.bind(this);
this.onAdminFormSubmit = this.onAdminFormSubmit.bind(this);
}
onPayerNameChange(e){
this.setState({
payerName: e.target.value
})
}
onPayerAddressChange(e){
this.setState({
payerAddress: e.target.value
})
}
onAdminFormSubmit(e){
e.preventDefault()
// I guess here goes the magic
}
render(){
return(
<div className="container ">
<form className="admin-form" onSubmit={this.onAdminFormSubmit}>
<div className="row">
<div className="jumbotron col-md-12">
<h4>PAYER INFORMATION</h4>
</div>
<div className="col-md-6">
<div className="panel panel-primary">
<div className="panel-heading">Payer Name</div>
<div className="panel-body">
<input
onChange={this.onPayerNameChange}
type="text"
className="form-control"
id="payerName"
placeholder="Payer Name" />
<div className="panel-body" id="getResult"><p>Payer Name: {this.state.payerName}</p></div>
</div>
</div>
</div>
<div className="col-md-6">
<div className="panel panel-primary">
<div className="panel-heading">Payer Address</div>
<div className="panel-body">
<input
onChange={this.onPayerAddressChange}
type="text"
className="form-control"
id="payerAddress"
placeholder="Payer Address" />
<div className="panel-body" id="getResult"><p>Payer Address: {this.state.payerAddress}</p></div>
</div>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary btn-lg">Apply config</button>
</form>
</div>
);
}
}
export default AdminConfig
我正在使用Stephen Grider的名为redux simple starter的样板,并且有一个动作和减速器的目录。接下来是为了将redux应用到我的表单中?