在 redux 形式的字段 onchange 上触发动作创建者

Question

我是 redux 的新手。我正在尝试使用 redux-form 创建一个应用程序。你能帮我如何在表单中的任何字段发生任何更改时触发操作吗？

    import React from 'react'
    import { Field, reduxForm } from 'redux-form'
    import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

    const renderField=({ input, label,name, type, meta})=>(
        <FormGroup row>
                        <Label for={name} sm={2}>{label}</Label>
                        <Col sm={10}>
                        <input {...input} placeholder={label} type={type}></input>
                         </Col>
        </FormGroup>
    )


    const BreakupForm=(props)=>{
        console.log(props);
        const { handleSubmit, pristine, reset, submitting } = props
        return(
            <div>
            <Label >Breakup</Label>
            <form onSubmit={handleSubmit}>

             <Field label="Basic" name="basic" component={renderField} type="text" placeholder="basic"/>
             <Field label="HRA" name="hra" component={renderField}  type="text" placeholder="HRA"/>
             <Field label="Transport Allowance" name="ta"  component={renderField}  type="text" placeholder="Transport Allowance" />
             <Field label="Special Allowance" name="specialAllowance" component={renderField} type="text" placeholder="Special Allowance" />
             <Field label="LTA" name="lta" component={renderField}  type="text" placeholder="LTA"/>
             <Field label="Medical Bills"  name="medicalBills" component={renderField} type="text" placeholder="Medical Bills"/>
            </form>
            </div>

        )
    }


export default reduxForm({
    form: 'breakupForm' // a unique identifier for this form
  })(BreakupForm)

Answer 1

您可以在每个要观察的字段上使用 onChange，例如：

<Field label="Basic" name="basic" component={renderField} type="text" placeholder="basic" onChange={onChangeHandler} />

然后编写您的 onChangeHandler ，它将使用以下参数调用：

event, newValue, previousValue, name

例如，查看您的代码，您可以像这样收听字段 basic 更改：

const BreakupForm = (props) => {

  const onBasicFieldChange = (event, newValue, previousValue, name) => {
    console.log(newValue)
  }

  console.log(props);
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <div>
      <Label >Breakup</Label>
      <form onSubmit={handleSubmit}>
        <Field onChange={onBasicFieldChange} label="Basic" name="basic" component={renderField} type="text" placeholder="basic" />
        <Field label="HRA" name="hra" component={renderField} type="text" placeholder="HRA" />
        <Field label="Transport Allowance" name="ta" component={renderField} type="text" placeholder="Transport Allowance" />
        <Field label="Special Allowance" name="specialAllowance" component={renderField} type="text" placeholder="Special Allowance" />
        <Field label="LTA" name="lta" component={renderField} type="text" placeholder="LTA" />
        <Field label="Medical Bills" name="medicalBills" component={renderField} type="text" placeholder="Medical Bills" />
      </form>
    </div>

  )
}

Answer 2

嗯，根据 Redux Form 文档，Redux Form onChange callback

Field组件接受一个prop(onChange)，你可以传递一个函数给onChange props。

 <Field label="Basic" onChange={this.handleChange} name="basic" component={renderField} type="text" placeholder="basic"/>

handleChange 将是您 class 中定义的函数。

由于你的组件是无状态组件，你可以通过props来传递回调函数

<Field label="Basic" onChange={props.handleChange} name="basic" component={renderField} type="text" placeholder="basic"/>

在 redux 形式的字段 onchange 上触发动作创建者

Trigger action creator on onchange of a field in redux-form

javascript

reactjs

redux

redux-form