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

おそらくチェックボックスで同様の問題が発生しています。

ハンドラを提供する場合、チェックボックスをオンにすると、チェックボックスにチェックが表示されません。ハンドラがなければ、チェックはリップル効果で表示されます。

私がonCheckを提供しない場合、チェックは..ハンドラが何らかの値を返すかどうかを示します。現在、私のトップレベルのコンポーネントの状態を設定します。私は真実を返そうとしたが、助けにはならなかった。

Answer 2

以下の例を確認してください。 RadioButtonの値を取得するには、valueSelectedおよびonChangeプロップをRadioButtonGroupに渡す必要があります。 onChange関数では、選択した値をstateに設定し、その状態を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>;