при выборе нескольких флажков получить все значения, используя ReactJs с BootstrapUI

Question

Код ниже, чтобы получить выбранные значения (как уточнение поиска / поиск).Например, если я нажимаю на флажок «Политические», я должен получить Политическое значение. Если я нажимаю на поле MovieCheckbox, я должен получить MovieValue, а также «Политическое значение». Если снять флажок «Должно отображаться только выбранное значение флажка».Ниже приведен код, который я написал

class Refinments extends Component {
    render(){
    const { handleChange,handleClick } = this.props;
    return(
    <Form>
       {['checkbox'].map(type => (
            <div key={`Political`} className="mb-1">
              <Form.Check 
                type={type}
                custom 
                id={`Political}`}
                label={`Political`}
                value={`Political`}
                onChange={handleChange.bind(this, "Political")}
              />
            </div>
        ))}
        {['checkbox'].map(type => (
            <div key={`movies`} className="mb-1">
              <Form.Check 
            type={type} custom
            id={`movies}`}
            label={`Movies`}
            value={`Movies`}
             onChange={handleChange.bind(this, "Movies")}
              />
            </div>
        ))}
     </Form>
     )}

export default Refinments;

Answer 1

Лучший вариант - сохранить выбранные значения в переменной состояния.Метод handleChange проверяет, находится ли измененное значение флажка в valArr. Если он присутствует, он удаляет значение из массива и заменяет переменную состояния новым массивом, а если его нет, он просто помещает значение в массив,

Таким образом, this.state.valArr всегда будет иметь только выбранные значения флажков.

constructor(props) {
  super(props);
  this.state = {
    valArr: []
  }
}
handleChange = (val) => {
  let { valArr } = this.state;
  let index = valArr.indexOf(val);
  if (index != -1)
      valArr.splice(index, 1);
  else
      valArr.push(val);
  this.setState({ valArr });
}
render() {
  .
  .
  .
  <div key={`movies`} className="mb-1">
      <Form.Check 
        type={type} custom
        id={`movies}`}
        label={`Movies`}
        value={`Movies`}
        onChange={this.handleChange}
      />
  </div>
}