Redux-Form:选择特定选项时删除字段数据

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

// Action creator函数，用于更新字段值
const updateField = (fieldKey, newValue) => {
  return {
    type: 'UPDATE_FIELD',
    fieldKey,
    newValue
  };
};

// React组件
const MyForm = (props) => {
  const { handleSubmit, updateField } = props;

  // 当选择特定选项时，调用updateField函数来删除字段数据
  const handleOptionChange = (event) => {
    if (event.target.value === 'specificOption') {
      updateField('fieldName', ''); // 删除字段数据
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>字段名：</label>
        <Field name="fieldName" component="input" type="text" />
      </div>
      <div>
        <label>特定选项：</label>
        <select onChange={handleOptionChange}>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="specificOption">特定选项</option>
        </select>
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

// 使用Redux的connect函数将action creator函数绑定到组件的props上
const mapDispatchToProps = (dispatch) => {
  return {
    updateField: (fieldKey, newValue) => dispatch(updateField(fieldKey, newValue))
  };
};

// 使用Redux-Form的reduxForm函数包装组件
const MyReduxForm = reduxForm({
  form: 'myForm'
})(MyForm);

// 使用Redux的connect函数将Redux-Form包装后的组件与Redux store连接起来
export default connect(null, mapDispatchToProps)(MyReduxForm);