React中如何按条件禁用表单？现有实现不生效问题排查

• 核心错误：disabled 是HTML原生仅对表单类元素生效的属性，支持的元素包括<input>、<button>、<select>、<fieldset>等，普通<div>标签本身不支持该属性，你给外层<div>设置disabled不会对内部的表单控件产生任何禁用效果。
• 次要优化点：代码中disabled={this.state.status === true ? true : false} 写法冗余，this.state.status本身就是布尔值，可直接简写为disabled={this.state.status}。

共有两种常用修复方案：

方案1：逐个绑定disabled属性 #

手动给内部所有<input>、<button>元素绑定disabled属性，适合表单元素数量较少的场景。

方案2：用fieldset标签包裹表单元素（更简便） #

<fieldset>原生支持disabled属性，设置后内部所有嵌套的表单控件会自动继承禁用状态，无需逐个绑定，适合表单元素较多的场景。

修正后的示例代码：

import { Component } from 'react';

class Questionnaire extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true,
    };
  }
  render() {
    return (
      <div>
        <fieldset disabled={this.state.status}>
          <h1>The Form</h1>
          <input type="text" />
          <br />
          <input type="text" />
          <br />
          <input type="text" />
          <br />
          <input type="text" />
          <br />
          <button>Submit</button>
        </fieldset>
      </div>
    );
  }
}

export default Questionnaire;

内容的提问来源于stack exchange，提问作者Tanzeel