Checkbox 的 Disabled 属性在 React 中不起作用

Question

我正在尝试使用 Material UI 在 React 中动态创建复选框，并且我想使用道具“禁用”来控制状态。但是当我在 componentDidMount() 中创建 Checkbox 时，“禁用”道具不会更新我的 Checkbox 的状态。当我直接在 render() 中创建复选框时，它可以工作。这是一个示例（和 CodeSandBox：https ://codesandbox.io/s/quirky-lewin-lxmp3?file=/src/App.js ）

import React from "react";

import "./styles.css";

import Checkbox from "@material-ui/core/Checkbox";

export default class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      edit: false,

      listCheckbox: null

    };

  }

  componentDidMount() {

    let listCheckbox = null;

    listCheckbox = (

      <div>

        <Checkbox disabled={!this.state.edit} />

        Checkbox componentDidMount()<br />

      </div>)

    this.setState({

      listCheckbox: listCheckbox,

    })

  }

  click() {

    this.setState({

      edit: this.state.edit ? false : true

    })

  }

  render() {

    return (

      <div className="App">

        <button

          onClick={this.click.bind(this)}

        >

         Update state!

        </button>

        <Checkbox disabled={!this.state.edit} /> Checkbox render() <br />

        {this.state.listCheckbox}

      </div>

    );

  }

}

我想要一种可以使用“禁用”道具并在 componentDidMount() 中创建我的复选框的方式。谢谢！

Answer 1

编辑：我第一次读错了这个问题......这次我会回答得更好。所以，我已经更改了代码，我认为这是使用 react 完成的最好方法。创建一个组件作为状态的一部分然后动态渲染不会很好。您最终可能会让 ti 工作，但这并不是 react 希望您使用组件和状态的方式。相反，尝试将数据和属性传递给渲染器，然后有条件地执行一些操作。我已经更改了代码并完成了这个......代码下方的解释import React from "react";import "./styles.css";import Checkbox from "@material-ui/core/Checkbox";export default class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; edit: false,&nbsp; &nbsp; &nbsp; isChecked: false,&nbsp; &nbsp; &nbsp; listCheckbox: []&nbsp; &nbsp; };&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; listCheckbox: ["Checkbox 1", "Checkbox 2"]&nbsp; &nbsp; })&nbsp; }&nbsp; click() {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; edit: this.state.edit ? false : true&nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; const { listCheckbox } = this.state&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.click.bind(this)}>Update state!</button> <br />&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listCheckbox.map((label) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Checkbox&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={this.state.isChecked}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled={!this.state.edit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => this.setState({isChecked: !this.state.isChecked})}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {label}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}你看到那里的主要变化了吗？渲染函数始终知道它正在使用哪些组件以及当数据更改时要做什么......这将使组件更易于维护并且对团队中的人员更易读