如何设置复选框的最大数量答案

【问题标题】：How to set a max number of checked boxes如何设置复选框的最大数量
【发布时间】：2018-07-01 00:00:17
【问题描述】：

我有一个带有相应复选框的选项列表（Material-UI）我试图弄清楚如何在复选框上设置最大数量（例如，我只希望用户能够单击三个然后禁用其余的）我在该州这样做吗？

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 260,
    backgroundColor: theme.palette.background.paper,
  },
});

class CheckboxList extends React.Component {
  state = {
    checked: [0],
  };

  handleToggle = value => () => {
    const { checked } = this.state;
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    this.setState({
      checked: newChecked,
    });
  };

  render() {
    const { classes } = this.props;
    const toppings = ['Chicken', 'Pineapple', 'Corn', 'Olives (green)', 'Red union', 'Spinach', 'Cherry tomatoes']
    return (
      <div className={classes.root}>
        <List>
          {toppings.map(value => (
            <ListItem
              key={value}
              role={undefined}
              dense
              button
              onClick={this.handleToggle(value)}
              className={classes.listItem}
            >
              <Checkbox
                checked={this.state.checked.indexOf(value) !== -1}
                tabIndex={-1}
                disableRipple
              />
              <ListItemText primary={`NewAge ${value}`} />

            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

CheckboxList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CheckboxList);

【问题讨论】：

标签： reactjs checkbox material-ui

【解决方案1】：

你可以这样做：

shouldDisableCheckbox = value => {
   // either from props: const { maxAllowed } = this.props
   // or from state: const { maxAllowed } = this.state
   // or just a constant:
   const maxAllowed = 3
   const { checked } = this.state
   return checked.length >= maxAllowed && checked.indexOf(value) === -1
}

然后在您的复选框中使用它：

<Checkbox
   checked={this.state.checked.indexOf(value) !== -1}
   tabIndex={-1}
   disabled={this.shouldDisableCheckbox(value)}
   disableRipple
/>

像 maxAllowed 这样的东西不应该处于状态中，而更像是一个常量或作为 prop 传入（如果未提供任何内容，则使用默认值），如 maxAllowed 是一个配置值，因此它的位置不在状态中。状态通常应该保存发生变化的东西。

此外，与所有 UI 验证一样，后端/api 也不应该信任此验证，因为它太容易被欺骗和删除。

【讨论】：

谢谢！这非常有效。必须将 disabled={this.shouldDisableCheckbox(value)} 放在 ListItem 组件中，然后禁用其余部分。
不客气，是的，这取决于您的自定义组件。

【解决方案2】：

我不知道Checkbox 是从哪里来的，但是你应该可以给它disabled 的属性，在反应中，它可以被赋予一个布尔值。 disabled={true}。所以你可以做类似disabled={this.state.checked.length >= 3 && [some logic to make sure you're not disabling one that is active]} 的事情。更好的形式是将它放在一个函数中并链接到它，因为它附加了很多逻辑。您不需要向您的状态添加任何内容。

【讨论】：