Warum ist meine Optionsschaltfläche nicht anklickbar?

Question

Mein Optionsfeld ist nicht anklickbar. Das ist meine Komponente:

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; 

Ich kann nicht scheinen zu verstehen, warum es nicht funktioniert. Hat jemand Ideen?

Answer 1

Sie setzen die Property checked permanent auf false, sodass das Kontrollkästchen den aktivierten Status nie ändert. Damit es funktioniert, müssen Sie den überprüften Status durch Reagieren und Verwalten des Status in Ihrer Komponente steuern (damit es keine zustandslose Funktionskomponente sein kann). Hier ist ein einfaches Beispiel:

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> 
    ); 
    } 
} 

Dies wird Status verwenden und Kontrolle und Abwählen des Optionsfelds verwalten. Die checked Requisite wird auch hier nicht mehr benötigt.

Eine gute Faustregel ist, sich zu fragen, ob die Komponente interaktiv sein soll oder sich ändern soll. Wenn ja, dann muss es einen internen Zustand haben. In diesem Fall muss die Schaltfläche aktiviert und deaktiviert sein. Dies sind zwei Zustände. Daher müssen Sie den internen Status verwalten.