Javascript 更改按钮上的多个状态'；点击

在我的react应用程序中，我有一个从axios呼叫返回的汽车列表，每辆车都有一个名为Returnable的属性，它是布尔值，是真是假，我有一个按钮和一个禁用的输入，我想当我点击这个按钮时，如果可退款为真，则启用输入，如果为假，则隐藏输入并显示该车不可退款的句子，我所做的代码检查可退款是否为真，并启用输入，但如果为假，则显示列表中所有车的假句子，以下是我正在做的：

初始状态：

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

按钮点击时的功能：

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

渲染汽车：

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

renderCars（）{
const cars=this.state.cars；
返回汽车。地图（（汽车，i）=>(
this.changeDisableState（car.id，i）}>检查
{this.state.isVisible？
：不能退款
));
}

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

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，则禁用我的输入”-是否应该取消它

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

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，则禁用我的输入”-是否应该取消它

您应该为每个汽车对象设置

isVisible

状态

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

{car.isVisible？：不能退款
}

您应该为每个汽车对象设置

isVisible

状态

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

{car.isVisible？：不能退款
}

您需要为最近单击的

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

changeDisableState=（id，i）=>{
const car=this.state.cars.find（x=>x.id==id）；
让isInputDisabled=this.state.isInputDisabled；
isInputDisabled[i]=！isInputDisabled[i]；
如果（汽车可退款==真）{
this.setState（{isInputDisabled，activeid:id}）；
}否则{
this.setState（{isVisible:false，activeid:id}）；
}
};
渲染器（）{
const cars=this.state.cars；
返回汽车。地图（（汽车，i）=>(
this.changeDisableState（car.id，i）}>检查
{this.state.isVisible？
：this.state.activeid===car.id&不能退款
));
}

您需要为最近单击的

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

changeDisableState=（id，i）=>{
const car=this.state.cars.find（x=>x.id==id）；
让isInputDisabled=this.state.isInputDisabled；
isInputDisabled[i]=！isInputDisabled[i]；
如果（汽车可退款==真）{
this.setState（{isInputDisabled，activeid:id}）；
}否则{
this.setState（{isVisible:false，activeid:id}）；
}
};
渲染器（）{
const cars=this.state.cars；
返回汽车。地图（（汽车，i）=>(
this.changeDisableState（car.id，i）}>检查
{this.state.isVisible？
：this.state.activeid===car.id&不能退款
));
}

如果其中一个输入字段为空，则代码将隐藏所有输入字段false@MonicaJennings你能不能给我一个工作代码，这样我就可以测试你的代码隐藏了所有的输入字段，如果其中一个是false@MonicaJennings你能不能给我一个工作代码，这样我就可以测试你是对的，但是在你的代码中设置状态有问题，那么问题的另一部分呢？你是对的，但是在代码中设置状态有问题，那么问题的另一部分呢？