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概念。

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

在这种情况下，我们将使用由change传递的redux-form道具。这将允许您更改表单中其他字段的值。

将此与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);

根据另一个更新一个字段

1 个答案: