0

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

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;

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

4

1 回答 1

2

您将checkedprop 永久设置为 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也不再需要道具了。

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

于 2017-05-30T01:20:14.730 回答