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

Question

现在我有一个基于 class 的组件，但我想将我的组件转换为基于函数的组件。代码在下面。我在基于 class 的组件中编写了 select 所有复选框。但现在我想将该组件转换为基于函数的组件，我已将所有方法和道具更改为我的代码，但存在一些状态错误。我没有收到可能的错误。

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'));

Answer 1

在功能组件中，您不能那样使用状态 !

在react Hooks之前，你没有机会拥有状态的内部函数组件。幸运的是，在 16.8 之后你有 React Hooks!

在您的情况下，您必须使用 useState(); 挂钩并将您当前的状态放入该挂钩中。

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'));

其他 this 关键字您只有 in-class 组件。

Answer 2

替换：

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

与：

const [checkedList, setCheckedList] = React.useState(defaultCheckedList);
const [indeterminate, setIndeterminate] = React.useState(true);
const [checkAll, setCheckAll] = React.useState(false);

要渲染状态，只需使用第一项：

<div>{indeterminate}</div>

要更改状态，请使用第二项：

setIndeterminate(false);

Answer 3

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

您应该使用 React hooks，并且必须使用数组常量分别设置每个状态。

如果我们假设代码是完全error/bug免费的，代码将是这样的：

（注意'this.'只用在class组件中）

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'));

数组的第二个参数更改第一个参数的数量，然后调用屏幕更新api。

您可以在 React Docs 中了解有关功能组件生命周期的更多信息。

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

How to convert class based component into function based component?

reactjs

antd

ant-design-pro