react+ant design开发中遇到的常用配置项问题。
一、根据属性值设置表格多选按钮是否禁用
通过设置rowSelection为表格添加复选框，通常为：
const rowChange = (key, row) => {
setSelectedRowKeys([...key]);
};
// ...
rowSelection={
{
type: "checkbox",
onChange: rowChange,
selectedRowKeys: selectedRowKeys,
}}
// ...只需设置getCheckboxProps，再根据属性值返回是否禁用即可：
// ...
const checkGetCheckboxProps = (record) => {
if (record.id === 1) {
return { disabled: true };
}
return null;
};
// ...
<Table
rowKey="id"
columns={columns}
dataSource={pageData.dataList}
loading={pageDataLoading}
rowSelection={
{
type: "checkbox",
onChange: rowChange,
selectedRowKeys: selectedRowKeys,
getCheckboxProps: checkGetCheckboxProps,
}}
/>
//...二、为Input/Radio/Select/Checkbox/RangePicker等设置默认值
- 以input为例，只需设置value，绑定为val，当输入的值改变时，setVal修改绑定的值即可：
// ...
const [val, setVal] = useState('')
// ...
<Input value={val} onChange={(e) => { setVal(e.target.value) }} />
// ...- Radio：只需设置value，绑定为val，当选择的值改变时，setVal修改绑定的值即可：
//...
const [val, setVal] = useState(1);
//...
<Radio.Group value={val} onChange={(e) => setVal(e.target.value)}>
<Radio value={1}>发票入库</Radio>
<Radio value={2}>先审后销</Radio>
<Radio value={3}>打入风险随货单</Radio>
</Radio.Group>
//...- RangePicker：只需设置value，绑定为timeRange，当选择的值改变时，setTimeRange修改绑定的值即可：
//...
const todayStart = new Date(
new Date(new Date().toLocaleDateString()).getTime()
); //今日00:00:00
const todayEnd = new Date(
new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
); //今日23:59:59
const [timeRange, setTimeRange] = useState([
moment(new Date(todayStart - 24 * 60 * 60 * 1000)),
moment(new Date(todayEnd - 24 * 60 * 60 * 1000)),
]); //设置日期
const dateChange = (e) => {
setTimeRange(e || ["", ""]);
};
//...
<RangePicker value={timeRange} format="YYYY-MM-DD" onChange={(e) => {dateChange(e);}}/>
//...其他同理。
三、Form需注意
Form.Item内容只能包着一个表单元素，如果设置多个，form.getFieldsValue()取不到值。例如下面的代码，form.getFieldsValue().title即为输入的标题：
<Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题!" }]}>
<Input placeholder="请输入标题" />
</Form.Item>但是如果设置多个，则无法取到任何一个控件的输入值：
<Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题!" }]}>
<Input placeholder="请输入标题" />
<Checkbox>记住我</Checkbox>
</Form.Item>总结
持续更新......