Question

我有一个表单，我需要根据redux-form选择字段的当前值更改按钮类型。如果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>

这是选择字段：

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;

如果选择字段中的选定值发生更改，并且它不等于选择字段的初始值，如何更改按钮类型？

Answer 1

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

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

1 个答案: