更改按钮单击时的多个状态

Question

在我的反应应用程序中，我有一个从 axios 调用返回的汽车列表，每辆汽车内部都有一个名为可退款的属性，它是布尔值，真或假，我有一个按钮和一个禁用的输入，我想要什么时候如果refundable 为true 则单击此按钮以启用输入，如果它为false 隐藏输入并显示这辆车不可退款的句子，我制作的代码检查refundable 是否为true 并启用输入，但是如果它是假的，它会显示列表中所有汽车的假句子，这就是我正在做的：

初始状态：

state={cars: [],isInputDisabled: [], isVisible: true }

按钮点击功能：

changeDisableState = (id, i) => {
    const car = this.state.cars.find(x => x.id === id);
    let isInputDisabled = this.state.isInputDisabled;
    isInputDisabled[i] = !isInputDisabled[i];
    if (car.refundable == true) {
      this.setState({ isInputDisabled });
    } else {
      this.setState({ isVisible: false });
    }
  };

渲染汽车：

renderCars() {
  const cars = this.state.cars;
  return cars.map((car, i) => (
   <div key={car.id}>
    <Button onClick={() => this.changeDisableState(car.id, i)}>Check</Button>
   {this.state.isVisible ? 
    <input
    disabled={!this.state.isInputDisabled[i]}/> : <p>Can't be refundable</p>}
   </div> 
  ));
}

Answer 1

您的代码中似乎缺少某些内容：

changeDisableState = (id, i) => {
    const car = this.state.cars.find(x => x.id === id);
    let isInputDisabled = this.state.isInputDisabled;
    if (car.refundable == true) {
      this.setState({ isInputDisabled[i] : !isInputDisabled[i] });
    } else {
      this.setState({ isVisible: false });
    }
  };

还有

这一行

 disabled={!this.state.isInputDisabled[i]}/>

不清楚。它读作“如果我的 isInputDisable 状态值为 false，则禁用我的输入”-不应该反转吗？

Answer 2

每个汽车对象都应该有isVisible 状态。

{car.isVisible ? <input ... /> : <p>Can't be refundable</p>}

Answer 3

您需要为最近点击的id 创建另一个状态变量。然后只为活动ID渲染句子

changeDisableState = (id, i) => {
    const car = this.state.cars.find(x => x.id === id);
    let isInputDisabled = this.state.isInputDisabled;
    isInputDisabled[i] = !isInputDisabled[i];
    if (car.refundable == true) {
      this.setState({ isInputDisabled,activeid:id });
    } else {
      this.setState({ isVisible: false, activeid:id });
    }
  };


renderCars() {
  const cars = this.state.cars;
  return cars.map((car, i) => (
   <div key={car.id}>
    <Button onClick={() => this.changeDisableState(car.id, i)}>Check</Button>
   {this.state.isVisible ? 
    <input
    disabled={!this.state.isInputDisabled[i]}/> : this.state.activeid === car.id && <p>Can't be refundable</p>}
   </div> 
  ));
}