更新一个字段基于另一个

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