Удалите все отключенные атрибуты нажатием кнопки

Question

У меня есть форма примерно с 30 полями. Некоторые из них представляют собой числовые поля ввода, некоторые - текстовые поля ввода, третьи - текстовые поля, а некоторые даже используют поля компонента валюты. Вот несколько примеров полей:

<NumberFormat
    value={this.state.tax}
    displayType={'input'}
    isNumericString={true}
    thousandSeparator={true}
    decimalScale={2}
    prefix={'$'}
    className="phone validate"
    name="Sales Tax"
    disabled                                        
/>  

<div className={`${styles.singleField} ${styles.smallField}`}>
    <label>
        Options
    </label>
    <select name="OptionList" value={this.state.OptionList} className="phone validate" disabled> 
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>                        
    </select>
</div>

<div className={`${styles.singleField} ${styles.largeField}`}>
    <label>
        Product
    </label>
    <input
        value={this.state.product}
        type="text"
        className="phone validate"
        name="Detailed Description"
        maxLength={45}
        disabled
    />
</div>

Я хочу создать кнопку с надписью edit form, которая затем удалит все отключенные теги из формы, чтобы пользователь мог редактировать форму. Вот что у меня есть. Все поля имеют className validation Я надеюсь, что смогу их схватить.

<button onClick={this.editForm.bind(this)} className={styles.btn}>Edit Form</button>

    async editForm(event) {
        event.preventDefault();
        console.log('Trigger to edit form');
        
        //Code here to remove disabled attirubutes 
    }

Answer 1

Вы захотите использовать для этого управление состоянием React. Я не уверен, находится ли это внутри компонента класса или функционального компонента, но вот как вы можете достичь того, что ищете.

Также документация React охватывает Состояние и жизненные циклы Я бы рекомендовал прочитать их.

Компонент класса CodePen :

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputsDisabled: true
    }
  }
  render() {
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={this.state.inputsDisabled} />
    )
  }
}

Функциональный компонент:

const YourComponent = () => {
  const [inputsDisabled, setInputsDisabled] = React.useState(false)
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={inputsDisabled} />
    )
  }
}