React -Redux:如何在提交事件时分派文本框值作为分派方法的参数

时间:2019-05-29 13:56:58

标签: react-redux

请告知如何将输入值传递给调度方法。我想将策略编号传递给action文件夹中index.js中的action方法.retrievepolicy方法需要获取策略编号作为参数< / p>

在提交事件时,将分派检索策略方法

import React from 'react'
import { connect } from 'react-redux'
import { sayHello } from '../actions'
import { retrievePolicy } from '../actions'

class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
  policyNumber: ""
}
this.handleChange = this.handleChange.bind(this);
}
render() {
const { saySomething, retrievePolicy, whatsUp } = this.props;

return (
<div class="container">
<div class="text-white bg-dark" >
<button class="btn btn-info" onClick={saySomething}>PRESS TO DISPATCH 
 FIRST ACTION</button>
 <h2>{whatsUp}</h2>
 <table>
 <tr>
 <td><label for="exampleInputEmail" class="label">Policy Number</label> 
 </td>
  <td><input type="textbox" class="textarea" id="policyNumberid" 
  name="policyNumberid"
  value={this.state.policyNumber} onChange={this.handleChange}
  /></td>
  </tr>
  <tr>
  <td>Data Location</td>
  <select class="form-control" id="timezone" name="timezone" 
   selected="selected"  >
   <option value="" selected disabled hidden>Choose here</option>
   <option value="Test">\\w</option>
   <option value="Stage">\\ws</option>
   </select>
   </tr>
   <tr><button class="btn btn-info" onClick={retrievePolicy} >Retrieve 
    Policy Information</button></tr>
    </table>
    </div>
    </div>
    )
    }
    handleChange(typedText) {
    alert('hi')
    this.setState({ policyNumber: typedText.target.value }, () => {
    console.log(this.state.policyNumber);
    });
    }
    };
    const mapStateToProps = (state) => ({
    whatsUp: state.policy,
    stateObject: state
    })
    const mapDispatchToProps = (dispatch) => (
    {
    saySomething: () => { dispatch(sayHello()) },
    retrievePolicy: (policyNumber) => { 
    dispatch(retrievePolicy(policyNumber)) }
    }
    )
    Button = connect(mapStateToProps, mapDispatchToProps)(Button)
    export default Button

0 个答案:

没有答案