React+Ant デザインの開発中に遭遇する一般的な構成アイテムの問題。
1. 属性値に応じてフォーム内の複数選択ボタンを無効にするかどうかを設定します
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,
}}
/>
//...2.Input/Radio/Select/Checkbox/RangePickerなどのデフォルト値を設定します。
- 入力を例として、値を設定して val にバインドするだけです。入力値が変更されると、setVal はバインドされた値を変更できます。
// ...
const [val, setVal] = useState('')
// ...
<Input value={val} onChange={(e) => { setVal(e.target.value) }} />
// ...- Radio: 値を設定して 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: 値を設定して 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);}}/>
//...他も同様です。
3、フォームに注意が必要
Form.Item コンテンツに含めることができるフォーム要素は 1 つだけです。複数のフォーム要素が設定されている場合、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>要約する
継続的に更新されます....