Material UI 复选框抱怨不受控制答案

【问题标题】：Material UI checkbox complaining to be uncontrolledMaterial UI 复选框抱怨不受控制
【发布时间】：2019-07-20 13:26:59
【问题描述】：

我正在为 React 使用 Material UI 工具包。我正在从状态动态地制作复选框并更新它们，

但我遇到了不受控制的元素错误。

this.state = {
    services : [{service: "s1", value: false},
                {service: "s2", value: false},
                {service: "s3", value: false},
               ]
};

handleServiceCheck = (i) => {
    let services = this.state.services;
    services[i].value = !services[i].value;
    this.setState({ services: services });
};

this.state.services.map((service, i) => (
    <FormControlLabel key={i}
        control={
            <Checkbox
                checked={service.value}
                onChange={() => this.handleServiceCheck(i)}
                value={service.service}
                className={classes.checkBox}
            />
        }
        label={service.service}
    />
))

【问题讨论】：

标签： reactjs checkbox state material-ui

【解决方案1】：

这里有几个问题。

首先，Checkbox 的 checked 属性需要一个布尔值，但您传递的是整数。

其次，当改变之前的状态时，你不应该改变它，你应该将一个函数传递给setState，它接受之前的状态并返回新的状态。

handleServiceCheck = (i) => {
  this.setState(prevState => ({services: 
    prevState.services.map((s, idx) => {
      return i === idx
        ? { ...s, value: !s.value }
        : s
    })
  }));
};

这是我使用完整固定工作版本创建的CodeSandbox sample。

【讨论】：

嗨，这解决了我的问题。非常感谢。