我有一個來自 Ant Design 的表單，在表單內部我正在回圈其中的一部分以創建多個行，但是當下拉串列中的一個值發生更改時 - 所有其他標簽。每一行都有變化。實際值不會保存到 seriesList 狀態，它只是在下拉串列中顯示相同的標簽。
我在這里設定初始狀態：
const [seriesList, setSeriesList] = useState([
{
seriesId: uuidv4(),
index: "watcher_events",
color: "",
type: "",
meta: {
watcher_name: "",
watcher_type: "",
watcher_id: ""
},
aggregation_field: "",
filters: [{
field: 'event_type',
operator: 'is',
value: ""
}],
},
]);
單擊添加系列時添加新行的功能
const handleAddClick = () => {
setSeriesList([...seriesList, {
seriesId: uuidv4(),
index: "watcher_events",
color: "",
type: "",
meta: {
watcher_name: "",
watcher_type: "",
watcher_id: ""
},
aggregation_field: "",
filters: [{
field: 'event_type',
operator: 'is',
value: ""
}],
}]);
};
使用所選顏色更新正確系列的功能。
const handleColor = (e: any, index: any) => {
const list = [...seriesList];
list[index].color = e;
setSeriesList(list);
};
我正在回圈并顯示在下拉串列中的顏色選項串列。
export const chartColorOptionsV2 = [
{
label: 'Green',
value: '#2AB596',
},
{
label: 'Orange',
value: '#F5A624',
},
{
label: 'Sky Blue',
value: '#53B9E9',
},
{
label: 'Pink',
value: '#E2507A',
},
{
label: 'Navy',
value: '#275FAD',
}
];
表單所在的 JSX 和我正在回圈的行：
<Button icon={<PlusOutlined/>}
size={"large"}
onClick={handleAddClick}>Add Series</Button>
{seriesList.map((x, i) => {
return (
<Row
key={i}
wrap={false}
style={{
marginTop: 5
}}>
<Form.Item
name={"index"}
key={`index: ${i}`}
hasFeedback
initialValue={x.index}
>
<Select
placeholder="Select an index"
size={"large"}
style={{
width: 200
}}
onChange={(e: any) => handleIndex(e, i)}
>
{indexOptions.map((option) => (
<Select.Option key={option.value i}
value={option.value}>{option.label}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name={"watcher"}
key={`watcher: ${i}`}
hasFeedback
rules={[{required: true, message: 'Please select a field'}]}
className={styles.filterMenuWatcherType}
>
<WaveValuesAutoComplete
index={seriesList[i].index}
field={determineIndex(seriesList[i].index)}
dropdownMatchSelectWidth={400}
style={{
width: 200,
marginLeft: 5
}}
size={"large"}
showCount={true}
onChange={(e: any) => handleWatcher(e, i)}
/>
</Form.Item>
<Form.Item name="color"
key={`color: ${i}`}
rules={[{required: true, message: 'Please select a color'}]}
hasFeedback
>
<Select
key={`color: ${i}`}
style={{
width: 200,
marginLeft: 5,
}}
placeholder="Select a color"
size={"large"}
onChange={(e: any) => handleColor(e, i)}
>
{chartColorOptionsV2.map((e: any) => (
<Select.Option key={e.value i} value={e.value}>{e.label}</Select.Option>
))}
</Select>
</Form.Item>
{seriesList.length !== 1 &&
<Tooltip title={"Click to remove this trace."}>
<Button icon={<DeleteOutlined/>}
size={"large"}
style={{
width: 50,
marginLeft: 5,
}}
onClick={() => handleRemoveClick(i)}
/>
</Tooltip>}
</Row>
);
})}
<div style={{marginTop: 20}}>{JSON.stringify(seriesList)}</div>
<Divider/>
<Form.Item>
<Button type="primary"
htmlType="submit"
size={"large"}
>
Add Chart
</Button>
</Form.Item>
</Form>
</Space>
uj5u.com熱心網友回復：
<Form.Item name="color". 我沒有錯，這是導致問題的原因。由于name每行中的欄位都相同，因此當您更改任何一個時，它將更改所有其他欄位。當您使用<Form.Item>并添加name屬性包裝任何欄位時，antd Form 控制該欄位。為了修復它，請確保每個欄位具有不同的名稱，即name={`color_${index}`}，或者如果您正在控制每個欄位值并處理其 onChange 函式，那么只需從 Form.Item 中洗掉名稱。希望這能解決您的問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466122.html