将一个Redux表单值复制到另一个

时间:2018-03-16 10:02:16

标签: reactjs redux react-redux redux-form

function mapStateToProps(state) {
    let returnObject = {};
    if (state && state.form) {
        if (
            state.form.someFormName &&
            state.form.someFormName.values &&
            state.form.someFormName.values.fieldNameX &&
            state.form.someFormName.values.fieldNameX === "1"
        ) {
            state.form.someFormName.values.fieldNameB =
                state.form.someFormName.values.fieldNameA;

            state.form.someFormName.values.fieldNameC =
                state.form.someFormName.values.fieldNameD;

            state.form.someFormName.values.fieldNameF =
                state.form.someFormName.values.fieldNameE;
        }
    }
    return returnObject;
}

这对于选择表单字段工作正常我只是将redux表单值复制到另一个字段,如何以高效方式执行?这是将一个表单字段复制到另一个表单字段的正确方法吗?

2 个答案:

答案 0 :(得分:1)

您可以使用formValueSelector连接到您的表单值,然后发送change操作创建者以使用您的值更新任何字段。

以下是带文本框的示例(您可以将其更新为使用datePicker):

import {change, formValueSelector} from 'redux-form';

let FormName = (props) => {
    const {dispatch, handleSubmit, firstValue} = props;
    return <form onSubmit={handleSubmit}>
        <div>
            <label>First Value</label>
            <Field
                name='firstValue'
                component='input'
                type='text'
                placeholder='First Value'
            />
        </div>
        <div>
            <label>Copy value</label>
            <div>
                <Field
                    name='checkbox'
                    component='input'
                    type='checkbox'
                    value='checkboxValue'
                    onChange={(e) => {
                        if (e.target.checked) {
                            dispatch(change('formName', 'secondValue', firstValue));
                        }
                    }}
                />
            </div>
        </div>
        <div>
            <label>Second Value</label>
            <Field name='secondValue' component='input' type='text'/>
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>
};

const selector = formValueSelector('formName');

connect(
    state => ({
        firstValue: selector(state, 'firstValue'),
    })
)(FormName);

答案 1 :(得分:0)

这不是像这样改变状态的首选方法(你正在改变状态)Redux 2原理,改为使用它: 如果你正在使用radio / checkbox,那么onPress of the radio / checkbox你可以复制所有字段,然后发送onChange动作。 对于Eg:

<Field
        type="radio"
        name="fieldNameX"
        value="1"
        onRadioPress={this.someMethod}
        component={CustomRadioButton}
    />

someMethod() {
        let formValues = Object.assign({}, this.props.formValues);
        this.props.dispatch(
            change("SomeForm", "fieldWantToCopy", value)
        );
    }