Material-UI 中的单选按钮和复选框不响应单击或点击答案

【问题标题】：Radio Button and Checkbox in Material-UI doesn't respond to click nor tapMaterial-UI 中的单选按钮和复选框不响应单击或点击
【发布时间】：2016-07-20 23:04:24
【问题描述】：

我正在使用 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.

但它不会像点击时那样更改值。它只是保持静止。

【问题讨论】：

我已将错误范围缩小为 react-tap-event-plugin 的问题。我将 ReactJS 与 Meteor 一起使用，并像 MaterialUI 文档中所说的那样调用模块。

标签： meteor reactjs material-ui

【解决方案1】：

我可能对 Checkbox 有类似的问题。

如果我提供了一个处理程序，那么复选框在选中时不会显示“打勾”。如果没有处理程序，检查会显示涟漪效应。

    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，那么检查会显示.. 处理程序是否应该返回一些值？目前它设置了我的顶级组件的 state 。我尝试返回 true，但没有帮助。

【讨论】：

【解决方案2】：

检查以下示例。您必须将 valueSelected 和 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>;

【讨论】：