Радио-кнопка и флажок в Material-UI не реагируют на щелчок и не нажимают

Question

Я использую Meteor + ReactJS, и я вытягиваю Material-UI через узловые модули.

<RadioButtonGroup name="shipSpeed" defaultSelected="not_light"> 
    <RadioButton value="light" label="Simple" style={styles.radioButton} /> 
    <RadioButton value="not_light" label="Selected by default" style={styles.radioButton} /> 
    <RadioButton value="ludicrous" label="Disabled" disabled={true} style={styles.radioButton} /> 
</RadioButtonGroup> 

Here is what it renders.

Но это не изменит значения, как это предполагается делать по щелчку. Он остается неподвижным.

Answer 1

Возможно, у меня подобная проблема с флажком.

Если я предоставляю обработчик, то флажок не показывает «галочку» при проверке. Без обработчика проверка показывает эффект пульсации.

import mui from 'material-ui'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); 
... 
    <mui.Checkbox 
     label="Employed" 
     name="Employed" 
     labelPosition="left" 
     style={fstyles.checkbox} 
     onCheck={props.cb} 
    /> 

Если я не предоставляю onCheck, тогда проверка показывает .. должен ли обработчик вернуть какое-то значение? в настоящее время он устанавливает состояние моего верхнего уровня. Я попытался вернуться, но не помог.

Answer 2

Проверьте приведенный ниже пример. Вы должны передать значенияSelected и onChange реквизиты RadioButtonGroup, чтобы получить значения RadioButton. В функции onChange задайте выбранное значение в состоянии и передайте это состояние в valueSelected, это все. Так просто.

<RadioButtonGroup 
    valueSelected={this.state.cranRadio} 
    onChange={this.handleCRAN} 
    style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between" }} 
    name="coin" 
    defaultSelected="not_light" 
> 
    <RadioButton 
    value="Yes" 
    label="Yes" 
    inputStyle={styles.inputStyle} 
    style={{ width: "auto" }} 
    labelStyle={{ marginLeft: "-10px" }} 
    /> 
    <RadioButton 
    value="No" 
    label="No" 
    style={{ width: "auto" }} 
    inputStyle={styles.inputStyle} 
    labelStyle={{ marginLeft: "-10px" }} 
    /> 
</RadioButtonGroup>;