Как установить максимальное количество флажков - PullRequest
Новая
       14

Как установить максимальное количество флажков

0 голосов
/ 30 июня 2018

У меня есть список опций с соответствующим флажком (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);

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

Вы можете сделать что-то вроде: 

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 это значение конфигурации, поэтому его место не в состоянии. Государство обычно должно содержать вещи, которые меняются.

Кроме того, как и при любой валидации пользовательского интерфейса, backend / api также не должен доверять этой валидации, поскольку ее слишком легко обмануть и удалить.

0 голосов
/ 30 июня 2018

Я не знаю, откуда исходит Checkbox, но вы должны иметь возможность присвоить ему свойство disabled, которому в ответ можно присвоить логическое значение. disabled={true}. Таким образом, вы могли бы сделать что-то вроде disabled={this.state.checked.length >= 3 && [some logic to make sure you're not disabling one that is active]}. Лучше было бы поместить это в функцию и связать с ней, поскольку к ней приложено много логики. Вам не нужно ничего добавлять к вашему состоянию.

...