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

【问题标题】：React - change the button type based on current value of the redux form select fieldReact - 根据 redux 表单选择字段的当前值更改按钮类型
【发布时间】：2018-03-06 10:34:08
【问题描述】：

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

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;

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

【问题讨论】：

在构建 redux-form 时，您有两种方法，您可以使用名为 formValueSelector redux-form.com/6.0.0-alpha.13/docs/api/formvalueselector.md 的 redux 表单字段值选择器，或者您可以将按钮包装在 Field 组件中，然后可以使用字段 API 为 normalize
感谢您的建议，我已经设法通过使用 ValueSelector 提出了解决方案。
太棒了！ :)) redux-form 有一些限制...下次如果您想使用更轻的形式，请尝试 formik :)) 但是如果您需要将 form 连接到 redux，那么 redux-form 是最好的解决方案跨度>

标签： reactjs react-redux redux-form

【解决方案1】：

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

【讨论】：