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

Posted 2021-05-07

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

但它不会改变像点击它应该做的值。它只是保持静止。

答案

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

如果我提供处理程序，则复选框在选中时不会显示“tick”。没有处理程序，检查显示具有涟漪效应。

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

另一答案

请查看以下示例。您必须将valueSelected和onChange道具传递给RadioButtonGroup以获取RadioButton的值。在onChange函数中，将所选值设置为state并将该状态传递给valueSelected，即all。就如此容易。

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