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，但它似乎没有做任何事情，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

你可以这样做：

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

Answer 2

event.target.value 不是输入复选框的 "toggled" 值，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 处理程序确实有效，但从语义上讲它不是正确的事件，您希望逻辑响应检查的值复选框更改与用户单击其元素的比例。

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

Setstate not updating in CustomInput type='checkbox' handler

setstate

reactjs

reactstrap