Reactjs 如何将基于类的组件转换为基于函数的组件？

现在我有一个基于类的组件，但我想把我的组件转换成基于函数的组件。代码在下面。 我已经在一个基于类的组件中编写了“全选”复选框。但是现在我想把这个组件转换成基于函数的，我已经把所有的方法和道具都改成了我的代码，但是有一些状态错误。我没有得到一个可能的错误

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

class App extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  };

  onChange = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  render() {
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup
          options={plainOptions}
          value={this.state.checkedList}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

now I am converting my component into function-based. but having an issue. Can anybody suggest me the possible mistake, please ... the checkbox is showing all options but unable to check the box or cant check all options at once. Can anybody suggest me some answer so I can solve my issue?

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

function App (props) {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  };

  const onChange = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  const onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };


    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup
          options={plainOptions}
          value={this.state.checkedList}
          onChange={this.onChange}
        />
      </div>
    );

}

ReactDOM.render(<App />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Checkbox}；
const CheckboxGroup=Checkbox.Group；
const plainOptions=['Apple'、'Pear'、'Orange']；
const defaultCheckedList=['Apple'，'Orange']；
类应用程序扩展了React.Component{
状态={
checkedList:defaultCheckedList，
不确定：对，
checkAll:false，
};
onChange=checkedList=>{
这是我的国家({
检查表，
不确定：！！checkedList.length&&checkedList.length{
这是我的国家({
选中列表：e.target.checked？纯选项：[]，
不确定：错误，
全部选中：e.target.checked，
});
};
render（）{
返回(
全部检查


);
}
}
ReactDOM.render（，document.getElementById（'container'））；
现在我正在将我的组件转换为基于函数的组件。但是有个问题。有人能告诉我可能的错误吗。。。该复选框显示所有选项，但无法选中该复选框或不能同时选中所有选项。有人能给我一些答案让我解决我的问题吗？
从“React”导入React，{useState}；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Checkbox}；
const CheckboxGroup=Checkbox.Group；
const plainOptions=['Apple'、'Pear'、'Orange']；
const defaultCheckedList=['Apple'，'Orange']；
功能应用程序（道具）{
状态={
checkedList:defaultCheckedList，
不确定：对，
checkAll:false，
};
const onChange=checkedList=>{
这是我的国家({
检查表，
不确定：！！checkedList.length&&checkedList.length{
这是我的国家({
选中列表：e.target.checked？纯选项：[]，
不确定：错误，
全部选中：e.target.checked，
});
};
返回(
全部检查


);
}
ReactDOM.render（，document.getElementById（'container'））；

在函数组件中，您不能以这种方式使用状态

在react挂钩之前，您没有机会拥有状态的内部功能组件。幸运的是，在react中16.8之后，您有了

在您的情况下，必须使用useState（）hook和当前状态放在该hook中

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

function App (props) {
  const [state, setState] = useState({
    checkedList: defaultCheckedList,
    indeterminate: true,
    checkAll: false,
  });

  const onChange = checkedList => {
    setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  const onCheckAllChange = e => {
    setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };


    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={state.indeterminate}
            onChange={onCheckAllChange}
            checked={state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <CheckboxGroup
          options={plainOptions}
          value={state.checkedList}
          onChange={onChange}
        />
      </div>
    );

}

ReactDOM.render(<App />, document.getElementById('container'));

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Checkbox}；
const CheckboxGroup=Checkbox.Group；
const plainOptions=['Apple'、'Pear'、'Orange']；
const defaultCheckedList=['Apple'，'Orange']；
功能应用程序（道具）{
常量[状态，设置状态]=使用状态({
checkedList:defaultCheckedList，
不确定：对，
checkAll:false，
});
const onChange=checkedList=>{
设定状态({
检查表，
不确定：！！checkedList.length&&checkedList.length{
设定状态({
选中列表：e.target.checked？纯选项：[]，
不确定：错误，
全部选中：e.target.checked，
});
};
返回(
全部检查


);
}
ReactDOM.render（，document.getElementById（'container'））；

Other

此

关键字是您仅有的类内组件

替换：

state = {
  checkedList: defaultCheckedList,
  indeterminate: true,
  checkAll: false,
};

与：

要呈现状态，只需使用第一项：

<div>{indeterminate}</div>

---

在类组件中，您只需编写一个状态对象“this.state”并描述该对象中的状态，但在功能组件中，情况会有所不同

您应该使用React钩子，并且必须使用数组常量分别设置每个单独的状态

如果我们假设代码完全没有错误/bug，则代码如下所示：

（请注意，“this.”仅在类组件中使用）

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Checkbox}；
const CheckboxGroup=Checkbox.Group；
const plainOptions=['Apple'、'Pear'、'Orange']；
const defaultCheckedList=['Apple'，'Orange']；
功能应用程序（道具）{
常量[checkedList，setCheckedList]=useState（默认checkedList）；
常量[不确定，设置不确定]=使用状态（真）；
const[checkAll，setCheckAll]=useState（false）；
const onChange=事件=>{
设置检查列表（事件）；
setUndeterminate（！！event.length&&event.length{
setCheckedList（例如target.checked？纯选项：[]）；
setUndeterminate（假）；
setCheckAll（即目标已选中）；
};
返回(
全部检查


);
}
ReactDOM.render（.
它解决了我的问题。当然，我会在给定的链接上了解更多有关这方面的信息。
<div>{indeterminate}</div>

setIndeterminate(false);

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];


function App(props) {
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChange = event => {
    setCheckedList(event);
    setIndeterminate(!!event.length && event.length < plainOptions.length)
    setCheckAll(event.length === plainOptions.length)
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };


  return (
    <div>
      <div className="site-checkbox-all-wrapper">
        <Checkbox
          indeterminate={indeterminate}
          onChange={onCheckAllChange}
          checked={checkAll}
        >
          Check all
              </Checkbox>
      </div>
      <br />
      <CheckboxGroup
        options={plainOptions}
        value={checkedList}
        onChange={onChange}
      />
    </div>
  );

}

ReactDOM.render(<App />, document.getElementById('container'));