Обработка доступности (отключение) для нескольких полей ввода в React - PullRequest
Новая
       14

Обработка доступности (отключение) для нескольких полей ввода в React

0 голосов
/ 11 июля 2019

Я хочу управлять атрибутом «отключить» для нескольких полей ввода.Я создал большую форму (более 30 входов), и некоторые из них будут доступны только в том случае, если установлен предыдущий флажок.

Моя текущая настройка похожа на пример ниже.В этом примере вы можете выбрать «special_offers» только в том случае, если выбран «информационный бюллетень».

class Form extends React.Component {
  state={
     newsletter: false,
     specialOffers: false,
     disabled:true,
}

  handleChangeCheck = name => e => {
    this.setState({
      [name]: e.target.checked
    });
    if (name === 'newsletter') {
      this.checkNewsletterValue()
    }
  };
  checkNewsletterValue() {
    if(this.state.newsletter === true){ 
    this.setState( {disabled: !this.state.disabled} )
  } 
}
  render() {
    return(
        <div>

            <Checkbox name="newsletter" value={this.state.newsletter} 
            onChange={handleChangeCheck('newsletter')}>Sign up for news letter
            </Checkbox>

            <Checkbox name="special_offers" value={this.state.specialOffers} 
            onChange={handleChangeCheck('specialOffers')}  disabled = 
            {this.state.disabled}>
            Sign up special offers
            </Checkbox>

        </div>
    );
  }
};

Моя проблема заключается в том, что я получу еще большее состояние, если мне потребуется создать новое состояние для изменения атрибута «отключить» для каждого отдельного поля ввода, которое зависит от предыдущего выбора.

Есть ли способ создать обобщенное решение для обработки всех «отключенных» значений для моих полей ввода?

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Допустим, у нас есть ключ для каждого input, ключ для каждого checkbox.

в этом случае у нас есть newsletter и special_offers

сценарий, который я предлагаю, это иметь массив в состоянии: - checkedBoxes - для хранения значений имен ящиков, которые контролируют, разрешены или нет другие ящики.

и по умолчанию handleChangeCheck, каждый раз, когда флажок установлен, мы помещаем его имя в массив. 

  handleChangeCheck = name => e => {
    let newCheckedBoxes = [...this.state.checkedBoxes]//don't forget to add a default value for that in the state as an array.
    //conditionally add or remove the items.
    if(newCheckedBoxes.indexOf(name)){
        newCheckedBoxes = newCheckedBoxes.filter(_name => _name !== name);
    } else {
        newCheckedBoxes.push(name);
    }
    e.target.checked && newCheckedBoxes.push(name)
    this.setState({
      [name]: e.target.checked,
      checkedBoxes: newCheckedBoxes,
    });
  };

и в ваших условно отключенных ящиках. 

<Checkbox
  name="special_offers"
  value={this.state.specialOffers} 
  onChange={handleChangeCheck('specialOffers')}
  disabled={!this.state.checkedBoxes.includes('newsletter')}>
    Sign up special offers
</Checkbox>
0 голосов
/ 11 июля 2019

Ну, вы можете попробовать использовать крючки вместо классического компонента.Это уменьшит раздувание, а также с помощью некоторого пользовательского хука вы можете уменьшить всю функцию только до одной функции, когда вы отправляете только проверенную и флажки, на которые влияет проверенная

Чтотакое Hook? Hook - это специальная функция, которая позволяет «подключиться» к функциям React.Например, useState - это хук, который позволяет вам добавлять состояние React для компонентов функций.Другие хуки мы узнаем позже.

Когда бы я использовал хук? Если вы пишете функциональный компонент и понимаете, что вам нужно добавить в него какое-то состояние, ранее вам приходилось преобразовывать егов класс.Теперь вы можете использовать Hook внутри существующего компонента функции.Мы собираемся сделать это прямо сейчас!

Что за крючок?

Кстати, не «пробуйте» крючки, если вы все ещеможно в вашем приложении перенести их на крючки, они чище и быстрее.

...