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

Question

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 表单值复制到另一个字段，如何以高效的方式进行操作？这是将一个表单字段复制到另一个表单字段的正确方法吗？

Answer 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);

Answer 2

这不是像这样改变状态的首选方法（你正在改变状态）Redux 2 原则，改用这个：如果您正在使用 radio/checkbox，那么 radio/checkbox 的 onPress 您可以复制所有字段，然后调度 onChange 操作。例如：

<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)
        );
    }

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

Copy one Redux Form Value to Another

reactjs

redux

redux-form

react-redux