React - 根据 redux 表单 select 字段的当前值更改按钮类型

Question

我有一个表单，我需要根据 redux-form select 字段的当前值更改按钮类型。如果 select 字段的值已经改变，那么我应该有提交按钮，如果值是相同的，那么按钮的类型应该是按钮。这是表格：

const templateOptions = cases.map(case => <option key={case.code} value={case.code}>{case.name}</option>);


<SelectField
      name="case"
      label={intl.formatMessage({ id: 'ModalSetTheCaseOnWait.Reason' })}
      placeholder={intl.formatMessage({ id: 'ModalSetTheCaseOnWait.SelectPlaceholder' })}
      validate={[required]}
      selectValues={templateOptions}
      width="xxl"
    />
  </Column>
</Row>
<Row>
  <Column xs="1" />
  <Column xs="7">
    {comment}
  </Column>
  <Column>
    <div className={styles.right}>
      <Mainbutton
        mini
        htmlType="button" // should change based on select value
        className={styles.button}
        onClick={showCancel ? ariaCheck : cancelEvent}
        disabled={(hasValidDate(frist) !== null || (!isUpdateOnHold && dateAfterOrEqualToToday(frist) !== null))}
      >{intl.formatMessage({ id: 'ModalSetTheCaseOnWait.Ok' })}
      </Mainbutton>
      {showCancel && <Button
        htmlType="button"
        mini
        onClick={cancelEvent}
        className={styles.cancelButton}
      >{intl.formatMessage({ id: 'ModalSetTheCaseOnWait.Cancel' })}
      </Button>
    }
    </div>
  </Column>

这是 select 字段：

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import { Field } from 'redux-form';
import SelectWithEdgeWorkaround from './SelectWithEdgeWorkaround';

import renderField from './renderField';
import { labelPropType } from './Label';
import ReadOnlyField from './ReadOnlyField';

import styles from './selectField.less';

const classNames = classnames.bind(styles);

// eslint-disable-next-line react/prop-types
const renderReadOnly = () => ({ input, selectValues, ...otherProps }) => {
  const option = selectValues.map(sv => sv.props).find(o => o.value === input.value);
  const value = option ? option.children : undefined;
  return <ReadOnlyField input={{ value }} {...otherProps} />;
};

const renderSelect = renderField(SelectWithEdgeWorkaround);

const SelectField = ({
  name, label, selectValues, validate, readOnly, ...otherProps
}) => (
  <Field
    name={name}
    validate={validate}
    component={readOnly ? renderReadOnly() : renderSelect}
    label={label}
    selectValues={selectValues}
    disabled={!!readOnly}
    {...otherProps}
    readOnly={readOnly}
    readOnlyHideEmpty
  />
);

SelectField.propTypes = {
  name: PropTypes.string.isRequired,
  selectValues: PropTypes.arrayOf(PropTypes.object).isRequired,
  label: labelPropType.isRequired,
  validate: PropTypes.arrayOf(PropTypes.func),
  readOnly: PropTypes.bool,
  placeholder: PropTypes.string,
  hideValueOnDisable: PropTypes.bool,
};

SelectField.defaultProps = {
  validate: null,
  readOnly: false,
  placeholder: ' ',
  hideValueOnDisable: false,
};

export default SelectField;

如果 select 字段中的 selected 值发生变化，并且它不等于 initial[=20=，我该如何更改按钮类型] select 字段的值？

Answer 1

由于构建了 redux-form，这里有两种方法，您可以使用名为 formValueSelector redux-form.com/6.0.0-alpha.13/[= 的 redux 表单字段值选择器13=].md，或者您可以将按钮包装在 Field 组件中，在那里您可以使用 Field API 作为 normalize

React - 根据 redux 表单 select 字段的当前值更改按钮类型

React - change the button type based on current value of the redux form select field

reactjs

redux-form

react-redux