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

您可以在要观察的每个字段上使用curl -XPOST https://api.branch.io/v1/url \ -d '{ "branch_key": "YOUR_BRANCH_KEY", "channel": "facebook", "feature": "onboarding", "campaign": "new product", "stage": "new user", "tags": ["one", "two", "three"], "data": { "$identity_id": "444", "$canonical_identifier": "content/123", "$og_title": "Title from Deep Link", "$og_description": "Description from Deep Link", "$og_image_url": "http://www.lorempixel.com/400/400/", "$desktop_url": "http://www.example.com", "custom_boolean": true, "custom_integer": 1243, "custom_string": "everything", "custom_array": [1,2,3,4,5,6], "custom_object": { "random": "dictionary" } } }'，例如：

onChange

然后编写将使用以下参数调用的<Field label="Basic" name="basic" component={renderField} type="text" placeholder="basic" onChange={onChangeHandler} />：

onChangeHandler

例如，查看代码，您可以收听字段event, newValue, previousValue, name更改，如下所示：

basic

Answer 2

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

Field组件接受一个prop（onChange），你可以将一个函数传递给onChange道具。

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

handleChange将是您班级中定义的函数。

由于您的组件是无状态组件，因此您可以通过props

传递回调函数

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

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

2 个答案: