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 {

  constructor(props) {

    super(props);

    this.state = {

      edit: false,

      isChecked: false,

      listCheckbox: []

    };

  }

  componentDidMount() {

    this.setState({

      listCheckbox: ["Checkbox 1", "Checkbox 2"]

    })

  }

  click() {

    this.setState({

      edit: this.state.edit ? false : true

    });

  }

  render() {

    const { listCheckbox } = this.state

    return (

      <div className="App">

        <button onClick={this.click.bind(this)}>Update state!</button> <br />

        {

          listCheckbox.map((label) => {

            return <div>

              <Checkbox 

                checked={this.state.isChecked}

                disabled={!this.state.edit}

                onClick={() => this.setState({isChecked: !this.state.isChecked})}

              />

              {label} 

            </div>

          })

        }

      </div>

    );

  }

}

你看到那里的主要变化了吗？

渲染函数始终知道它正在使用哪些组件以及当数据更改时要做什么......这将使组件更易于维护并且对团队中的人员更易读