<Checkbox.Group value={selectedList} onChange={()=>{console.log(1111);}}>
时间: 2023-02-09 12:25:45 浏览: 62
Checkbox.Group 是一个 React 组件,它可以让你创建一组可供选择的复选框。它有一个 value 属性,表示当前选中的复选框的列表,以及一个 onChange 事件处理函数,当选中的复选框发生变化时调用。例如,你可以像这样使用它:
```
import { Checkbox } from 'antd';
function MyComponent() {
const [selectedList, setSelectedList] = useState([]);
return (
<Checkbox.Group
value={selectedList}
onChange={(newSelectedList) => {
setSelectedList(newSelectedList);
console.log(1111);
}}
>
<Checkbox value="A">A</Checkbox>
<Checkbox value="B">B</Checkbox>
<Checkbox value="C">C</Checkbox>
</Checkbox.Group>
);
}
```
在这个例子中,当用户选中或取消选中复选框时,会调用 onChange 事件处理函数,并更新 selectedList 状态变量的值。
相关问题
{searchList.length !== 0 && ( <> <div style={{ fontSize: 15, color: '#9f9f9f', padding: '5px 6px' }}> 已查询到{searchList.length}条数据 </div> <div> <Checkbox.Group value={selectedList} onChange={()=>{console.log(1111);}}> <Space direction="vertical" style={{ width: '100%', backgroundColor: '#fff' }}> {searchList.map((item) => ( <Checkbox value={item.organizationId} key={item.organizationId}> <div style={{ marginLeft: 5 }}> <div className={styles.positionName}> {item.name} {mark === 'personnel' && item.positionName && <>({item.positionName})</>} </div> <div className={styles.orgName} style={{ display: mark === 'position' ? '' : 'none' }} > {item.organizationName} </div> </div> </Checkbox> ))} </Space> </Checkbox.Group> </div> </> )} 这是我写的一个公共组件,但是这个组件的onChange方法在一个tab页能执行,再另外一个tab页执行不了
I'm sorry, but the text you provided is incomplete and it is not clear what you are asking for. Could you please provide more context or clarify your question so that I can better assist you?
antd Checkbox.Group 点击事件如何获取label和value
在antd Checkbox.Group组件中,可以通过`onChange`事件来获取选中的label和value。具体实现方法如下:
1. 在Checkbox.Group组件中,设置`options`属性,其中每个选项包含`label`和`value`。
```jsx
import { Checkbox } from 'antd';
const options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
];
<Checkbox.Group options={options} onChange={handleChange} />
```
2. 在`onChange`事件中,获取选中的label和value。
```jsx
const handleChange = (checkedValues) => {
const selectedOptions = options.filter(option => checkedValues.includes(option.value));
const selectedLabels = selectedOptions.map(option => option.label);
const selectedValues = selectedOptions.map(option => option.value);
console.log('Selected labels: ', selectedLabels);
console.log('Selected values: ', selectedValues);
};
```
在`handleChange`函数中,首先通过`filter`函数获取选中的选项,然后分别通过`map`函数获取选中选项的label和value,并打印输出到控制台中。这样就可以在antd Checkbox.Group组件中的点击事件中获取选中的label和value了。