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

Question

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

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