单击按钮删除所有禁用的属性

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 的状态管理。我不确定这是在 class 组件还是功能组件内部，但这里是您实现所需内容的方法。

React 文档也涵盖了 State and Lifecycles 我建议通读这些。

Class 组件 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} />
    )
  }
}

单击按钮删除所有禁用的属性

Remove all disabled attribute with button click

javascript

forms

attributes

typescript

reactjs