爲什麼我的單選按鈕不可點擊？

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 prop設置爲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道具也不再需要了。

一個很好的經驗法則是問問你自己，如果組件應該是互動或改變。如果是，那麼它必須有內部狀態。在這種情況下，必須檢查和取消選中按鈕，這兩個狀態爲。因此你必須管理內部狀態。