为什么单选按钮不可点击？

Question

我的单选按钮不可点击。 这是我的组件：

import React from 'react';
import { Form, Radio } from 'semantic-ui-react';
import PropTypes from 'prop-types';

const RadioButton = ({ name, label, className, value, onClick, checked, defaultValue }) => (
  <Form.Field>
    <Radio type="radio" label={label} defaultValue={defaultValue} value={value} name={name} className={className} onClick={onClick} checked={checked} />
  </Form.Field>
);

RadioButton.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  className: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(undefined)]),
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(undefined)]),
  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(undefined)]),
  checked: PropTypes.bool,
};

RadioButton.defaultProps = {
  className: '',
  value: undefined,
  defaultValue: undefined,
  onClick: null,
  checked: false,
};

export default RadioButton;

我似乎无法理解为什么它不起作用。 有人有想法么？

Answer 1

您将永久将checked道具设置为false，因此该复选框永远不会更改选中的状态。 为了使其正常工作，您需要通过React控制它的检查状态并管理组件中的状态（因此它不能是无状态的功能组件）。 这是一个简单的例子：

class RadioButton extends React.Component {
  //you can statically set propTypes and defaultProps here if you prefer

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      checked: false
    };
  }

  handleClick() {
    this.setState(prevState => ({ //ensure correct previous state when async call is batched
      checked: !prevState.checked
    }));
    this.props.onClick && this.props.onClick(); //only execute if exists
  }

  render() {
    return (
      <Form.Field>
        <Radio {...this.props} onClick={this.handleClick} checked={this.state.checked} /> //{...this.props} passes props to Radio passed to RadioButton
      </Form.Field>
    );
  }
}

这将使用状态并管理单选按钮的检查和取消检查。 这里也不再需要checked道具。

一个好的经验法则是问问自己该组件是否应该是交互式的或可更改的。 如果是，则它必须具有内部状态。 在这种情况下，必须选中和取消选中按钮，这是两种状态 。 因此，您必须管理内部状态。