如何使用redux来保存数据onSubmit Handler | React Redux

时间:2017-06-01 21:28:46

标签: reactjs redux

如何使用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应用到我的表单中?

0 个答案:

没有答案