如何在 React 中有条件地禁用表单 [重复]答案

【问题标题】：How to disable a form conditionally in React [duplicate]如何在 React 中有条件地禁用表单 [重复]
【发布时间】：2021-10-31 13:17:11
【问题描述】：

我不想在这里问这个简单的问题，但是这个功能对我不起作用，我不明白为什么。一切看起来都正确：


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

export default Questionnaire;

你发现这里有什么问题吗？请指出我的错误。我还创建了这个stackblitz。

【问题讨论】：

您不能禁用 div。你应该改用fieldset
@RobertoZvjerković，这是一个非常基本和简单的形式。有解决办法吗？
是的。使用fieldset
我正在接受@Dmitriif 的回答。罗伯托的回答也解决了我的问题。两者都有有效点。谢谢大家。
@RobertoZvjerković，是的，它回答了我的问题。感谢您的补充回答

标签： reactjs

【解决方案1】：

根据您想要实现的目标，您可以使用字段集在整个表单上设置禁用 - How can I make an entire HTML form "readonly"?

或者您可以将disabled 属性设置为提交按钮

【讨论】：

知道了。我接受这个答案

【解决方案2】：

您可以改为使用fieldset 包装您的 div。或者使用下面的 CSS

div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}

检查这个：How to disable all div content

【讨论】：