SetState未在CustomInput type ='checkbox'处理程序中更新

Question

这是渲染方法，我如何调用处理程序并设置reactstrap复选框。

    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不执行任何操作，idk为什么呢？

  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 newDishes;
  });
};

渲染的CustomInput减少为

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

无需传递value道具，因为它永远不会改变。

Answer 2

您可以这样操作：

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