react Antdesign Select添加全选功能

<Form.Item label={`发送对象`}>
{getFieldDecorator('participants', {
rules: [{ required: true, message: '请选择发送对象!' }],
})(
<Select
style={{ width: '300px' }}
mode="multiple"
placeholder="请选择"
onChange={this.selectChange}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
allowClear
dropdownRender={allSelectValue => (
<div onMouseDown={e => e.preventDefault()}>
<div style={{ padding: '4px 8px 8px 8px', cursor: 'pointer' }}>
<Checkbox
checked={this.state.checkStatus}
onChange={e => this.boxCheck(e)}
>
全选
</Checkbox>
</div>
{allSelectValue}
</div>
)}
>
{this.state.sendList.map((item, index) => {
return (
<Option key={index} value={item.partyId}>
{item.name}
</Option>
);
})}
</Select>
)}
</Form.Item>


boxCheck = e => {
this.setState({
checkStatus: e.target.checked,
});
let list = [];
this.state.sendList.map((item, index) => {
list.push(item.partyId);
});
if (e.target.checked) {
this.props.form.setFieldsValue({ participants: list });
} else {
this.props.form.setFieldsValue({ participants: [] });
}
};


 

posted @ 2021-09-23 17:40  _心之所向便是光  阅读(1382)  评论(0编辑  收藏  举报