Это метод рендеринга, как я вызываю обработчик и устанавливаю флажокactstrap.

    this.state.dishes.map(
                    (dish, i) => (
                      <div key={i}>
                          <CustomInput
                            type="checkbox"
                            id={i}
                            label={<strong>Dish Ready</strong>}
                            value={dish.ready}
                            checked={dish.ready}
                            onClick={e => this.onDishReady(i, e)}
                          />

                        </div>))

Обработчик для прослушивателя onClick, я тоже пробовал с onchange, но, похоже, onchange ничего не делает, почему?

  onDishReady = (id, e) => {
    console.log(e.target.value)
    var tempArray = this.state.dishes.map((dish, i) => {
      if (i === id) {


        var temp = dish;
        temp.ready = !e.target.value
        return temp
      }
      else {
        return dish
      }
    })
    console.log(tempArray)
    this.setState({
      dishes: tempArray

    });

  }
1
Hamza khan Joyia 15 Апр 2020 в 23:46

2 ответа

Лучший ответ

event.target.value не является «переключаемым» значением флажка ввода, а event.target.checked.

onDishReady = index => e => {
  const { checked } = e.target;
  this.setState(prevState => {
    const newDishes = [...prevState.dishes]; // spread in previous state
    newDishes[index].ready = checked; // update index
    return { dishes: newDishes };
  });
};

Рендеринг CustomInput сводится к

<CustomInput
  checked={dish.ready}
  id={i}
  label={<strong>DishReady</strong>}
  onChange={this.onDishReady(i)}
  type="checkbox"
/>

Нет необходимости передавать value реквизит, поскольку он никогда не меняется.

Примечание. Несмотря на то, что обработчик onClick действительно работает, семантически это не совсем корректное событие, но вы хотите, чтобы логика реагировала на измененное значение флажка, изменяющееся по сравнению с щелчком пользователя на его элемент.

Edit checkbox array toggle demo

0
Drew Reese 16 Апр 2020 в 16:45

Вы можете сделать это следующим образом:

    this.setState(function (state) {
        const dishes = [...state.dishes];
        dishes[id].ready = !e.target.value;
        return dishes;
    });
0
HermitCrab 16 Апр 2020 в 16:22