基于另一个字段更新一个字段

Question

作为我表单的一部分，我有一个用于 selecting 项目的字段和一个按钮，客户单击该按钮以将项目添加到他们的单位列表中。我希望在单位文本字段中显示用户 select 编辑的单位列表。我如何实现按钮的 onclick 函数，以便它在将 select 组件附加到文本框显示的列表之前获取 select 组件的当前值？我有一个单独的保存按钮，它将获取表单数据并在单击时将其发送到后端。

let EditUserForm = (props) => {
    const { handleSubmit, units } = props;
    return (
        <form onSubmit={handleSubmit}>

            <Field name="units" component="input" type="text" readOnly/> 

            <Field name="unit" component="select" >
            {
                units.map(u => <option value={u} key={u}>{u}</option>)
            }
            </Field>

            <button type="button" onClick={props.updateUserUnits}>Add unit</button>

        </form>
    );
};

Answer 1

您可以在下面的代码中执行类似的操作。这结合了几个 redux-form 概念。

基本上你想拦截来自 select 组件的 onChange 事件，所以你可以给它附加一些逻辑。

在这种情况下，我们将使用 redux-form 传递下来的 change 属性。这将允许您更改表单中另一个字段的值。

将它与 formValueSelector 相结合，使您可以从特定的表单字段中获取值。

import React from 'react'
import { connect } from 'react-redux';
import { Field, FieldArray, formValueSelector, reduxForm } from 'redux-form'

const EditUser = (props) => {
    const { change, handleSubmit, selectedUnits = [], units } = props;

    const handleUnitChange = (event, value) => {
      const newUnits = [ ...selectedUnits, value ];

      change('units', newUnits);
    }

    return (
        <form onSubmit={handleSubmit}>
            <Field name="units" component="input" type="text" readOnly/> 

            <Field name="unit" component="select" onChange={handleUnitChange}>
              {units.map(u => <option value={u} key={u}>{u}</option>)}
            </Field>

            <button type="button" onClick={props.sendData}>Add unit</button>
        </form>
    );
};

const form = 'editUserForm';

const EditUserForm = reduxForm({
  form
})(EditUser);

const selector = formValueSelector(form);

export default connect(state => ({
  selectedUnits: selector(state, 'units')
}))(EditUserForm);

基于另一个字段更新一个字段

Update one Field based on another

javascript

reactjs

redux-form