我有一个带有相应复选框的选项列表(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);
答案 0 :(得分: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 之类的内容不应该处于状态,而更像是一个常量或作为道具(如果没有提供任何内容,则为默认值)作为 maxAllowed 传递strong>是配置值,因此它的位置不在状态中。国家通常应该持有改变的东西。
此外,与所有UI验证一样,后端/ api也不应信任此验证,因为它很容易欺骗和删除。
答案 1 :(得分:0)
我不知道Checkbox
的来源,但是您应该能够赋予它disabled
的属性,作为响应,可以给它一个布尔值。 disabled={true}
。因此,您可以执行类似disabled={this.state.checked.length >= 3 && [some logic to make sure you're not disabling one that is active]}
的操作。更好的形式是将其放在函数中并链接到它,因为它具有很多逻辑。您不需要在状态中添加任何内容。