Common configuration item problems encountered in the development of react+ant design.
1. Set whether the multi-choice button in the form is disabled according to the attribute value
Add a checkbox to the table by setting rowSelection , usually:
const rowChange = (key, row) => {
setSelectedRowKeys([...key]);
};
// ...
rowSelection={
{
type: "checkbox",
onChange: rowChange,
selectedRowKeys: selectedRowKeys,
}}
// ...Just set getCheckboxProps , and then return whether it is disabled according to the property value:
// ...
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,
}}
/>
//...2. Set default values for Input/Radio/Select/Checkbox/RangePicker, etc.
- Take input as an example, just set the value and bind it to val. When the input value changes, setVal can modify the bound value:
// ...
const [val, setVal] = useState('')
// ...
<Input value={val} onChange={(e) => { setVal(e.target.value) }} />
// ...- Radio: Just set the value and bind it to val. When the selected value changes, setVal can modify the bound value:
//...
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: Just set the value and bind it to timeRange. When the selected value changes, setTimeRange modifies the bound value:
//...
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);}}/>
//...Others are the same.
Three, Form needs attention
Form.Item content can only contain one form element, if more than one is set, form.getFieldsValue() cannot get the value. For example, in the following code, form.getFieldsValue().title is the title of the input:
<Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题!" }]}>
<Input placeholder="请输入标题" />
</Form.Item>But if more than one is set, the input value of any control cannot be obtained:
<Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题!" }]}>
<Input placeholder="请输入标题" />
<Checkbox>记住我</Checkbox>
</Form.Item>Summarize
Continually updated......