更新一个字段基于另一个
问题描述:
作为我的表单的一部分,我有一个字段用于选择项目和客户端点击的按钮,以便将项目添加到他们的单位列表。我希望在单位文本字段中显示用户选择的单位列表。如何为按钮实现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>
);
};
答
你可以在下面的代码中做类似的事情。这结合了几个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);