Изменение нескольких состояний при нажатии кнопки - PullRequest
Новая
       7

Изменение нескольких состояний при нажатии кнопки

1 голос
/ 29 марта 2019

В моем приложении «Реакция» у меня есть список автомобилей, возвращенных после вызова Axios, у каждого автомобиля есть атрибут, называемый «Возвратный», и имеет логическое значение «Истина» или «Ложь», и у меня есть кнопка и отключенный ввод, я хочу, чтобы я нажмите на эту кнопку, если возвращаемое значение true, чтобы разрешить ввод, и если false, чтобы скрыть ввод и показать предложение, что этот автомобиль не подлежит возврату, код, который я сделал, проверяет, является ли возвращаемое значение 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> 
  ));
}

Ответы [ 3 ]

0 голосов
/ 29 марта 2019

Вы должны иметь состояние isVisible для каждого объекта автомобиля. 

{car.isVisible ? <input ... /> : <p>Can't be refundable</p>}
0 голосов
/ 29 марта 2019

Вам нужно создать еще одну переменную состояния для недавно нажатой 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> 
  ));
}
0 голосов
/ 29 марта 2019

Кажется, что вы что-то упустили в своем коде: 

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» - не должно ли оно быть инвертировано?

...