Устанавливает состояние не обновляется в обработчике CustomInput type = 'checkbox'

Question

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

    });

  }

Answer 1

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

Answer 2

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

    this.setState(function (state) {
        const dishes = [...state.dishes];
        dishes[id].ready = !e.target.value;
        return dishes;
    });