react中组件中button怎么绑定checked样式

如果你想要在 React 中实现一个带有 checked 样式的按钮，可以通过控制组件中的 state 属性来实现。具体步骤如下：

1. 在组件的 constructor 中初始化一个 state 属性，用于保存按钮是否被选中的状态：

   constructor(props) {
     super(props);
     this.state = {
       checked: false
     };
   }

2. 在按钮的 onClick 事件中，切换 state 中 checked 属性的值：

   handleClick() {
     this.setState({ checked: !this.state.checked });
   }

3. 在按钮的 className 中，根据 state 中 checked 属性的值来切换 checked 样式：

   <button
     className={this.state.checked ? 'checked' : ''}
     onClick={this.handleClick.bind(this)}
   >
     按钮
   </button>

这样，当按钮被点击时，它的 checked 样式将会被激活，再次点击则会取消 checked 样式。

相关问题

react中组件中多个button怎么点击哪个，哪个绑定checked样式

如果你需要在 React 中实现多个按钮，并且需要点击其中一个按钮时，只有当前按钮绑定 checked 样式，其他按钮不受影响，可以按照以下步骤实现：

1. 在组件的 constructor 中初始化一个 state 属性，用于保存当前被选中的按钮的索引：

   constructor(props) {
     super(props);
     this.state = {
       checkedIndex: -1
     };
   }

2. 在每个按钮的 onClick 事件中，将当前按钮的索引传递给一个回调函数 handleButtonClick：

   <button
     className={this.state.checkedIndex === index ? 'checked' : ''}
     onClick={() => this.handleButtonClick(index)}
   >
     按钮{index}
   </button>

在 handleButtonClick 函数中，将当前按钮的索引更新到 state 中的 checkedIndex 属性：

   handleButtonClick(index) {
     this.setState({ checkedIndex: index });
   }

3. 在每个按钮的 className 中，根据 state 中 checkedIndex 属性的值来判断是否绑定 checked 样式：

   className={this.state.checkedIndex === index ? 'checked' : ''}

这样，只有当前被点击的按钮会绑定 checked 样式，其他按钮不受影响。

基于react函数组件写一个组织树，满足选择组织机构或一线员工进行回收，在某个层级下可多选，但是不可同时选择不同层级回收。如果调度层级回收，提供是否全部回收的按钮。

A：

首先，需要引入相关组件和样式：

import React, { useState } from 'react';
import { Tree, Checkbox } from 'antd';
import 'antd/dist/antd.css';

然后，定义一个组织树组件：

const OrgTree = ({ data }) => {
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeys) => {
    setCheckedKeys(checkedKeys);
  };

  const renderCheckbox = (node) => {
    if (node.isLeaf) {
      return <Checkbox value={node.key}>{node.title}</Checkbox>;
    }
    return node.title;
  };

  return (
    <Tree
      checkable
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      switcherIcon={<DownOutlined />}
      treeData={data}
      titleRender={renderCheckbox}
    />
  );
};

其中，`data` 是组织树数据源，`checkedKeys` 是当前选中的节点的 key，`onCheck` 是选中节点时的回调函数，在回调函数中更新 `checkedKeys` 状态；`renderCheckbox` 主要是根据节点是否为叶子节点来判断该节点是否需要显示选择框。

接下来，在组织树之上定义一个回收组件：

const Recycle = ({ data }) => {
  const [levelCheckedKeys, setLevelCheckedKeys] = useState({});
  const [selectedLevel, setSelectedLevel] = useState(null);

  const onCheckLevel = (checkedKeys, { node }) => {
    setSelectedLevel(node.level);
    setLevelCheckedKeys({ ...levelCheckedKeys, [node.level]: checkedKeys });
  };

  const handleRecycle = (allSelected) => {
    console.log(`将 ${selectedLevel} ${allSelected ? '全部' : '部分'} 回收`);
  };

  const renderCheckbox = (node) => {
    if (node.isLeaf) {
      return <Checkbox value={node.key}>{node.title}</Checkbox>;
    }
    return node.title;
  };

  const levelNodes = data.reduce((acc, cur) => {
    const index = cur.title.lastIndexOf('-');
    const level = cur.title.substring(0, index);

    if (!acc[level]) {
      acc[level] = [];
    }
    acc[level].push(cur);
    return acc;
  }, {});

  const levels = Object.keys(levelNodes);

  return (
    <div>
      <OrgTree data={data} />
      <div style={{ marginTop: 16 }}>
        <div style={{ marginBottom: 8 }}>选择级别回收：</div>
        {levels.map((level) => (
          <div key={level}>
            <div style={{ marginBottom: 8 }}>{level}</div>
            <Checkbox.Group
              options={levelNodes[level]}
              value={levelCheckedKeys[level]}
              onChange={onCheckLevel}
              optionRender={renderCheckbox}
            />
          </div>
        ))}
        {selectedLevel && (
          <div style={{ marginTop: 16 }}>
            <Checkbox onChange={(e) => handleRecycle(e.target.checked)} checked={false}>
              是否全部回收 {selectedLevel}？
            </Checkbox>
            <Button type="primary" onClick={() => handleRecycle(false)} style={{ marginLeft: 16 }}>
              部分回收
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

其中，`levelCheckedKeys` 是一个对象，用于存储每个层级选择的节点的 key；`selectedLevel` 是选中层级的标识，用于判断是否显示回收操作。

`onCheckLevel` 函数与 `onCheck` 函数类似，不同的是在更新 `levelCheckedKeys` 状态之前先保存当前选中的层级标识；`handleRecycle` 函数用于执行回收操作，接收一个参数 `allSelected`，表示是否全部回收。在组件中渲染组织树和层级选择框，同时判断是否选中某个层级，若选中则显示回收操作。

最后，使用 `Recycle` 组件并传入数据源即可：

const data = [
  {
    title: '总部',
    key: '0',
    children: [
      {
        title: '人事部',
        key: '0-0',
        children: [
          { title: '李四', key: '0-0-0', isLeaf: true },
          { title: '王五', key: '0-0-1', isLeaf: true },
        ],
      },
      {
        title: '财务部',
        key: '0-1',
        children: [
          { title: '张三', key: '0-1-0', isLeaf: true },
          { title: '赵六', key: '0-1-1', isLeaf: true },
        ],
      },
    ],
  },
];

<Recycle data={data} />;

在这里，我们使用了 antd 的相关组件，包括 `Tree` 和 `Checkbox`。同时，通过 `useState` 来管理组件的状态，使用函数组件的方式编写了一个组织树，并且实现了所需的选中和回收功能。