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道具。

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

为什么我的单选按钮无法点击？

1 个答案: