近期刚接触React+ts+Ant,遇见了挺多的问题,因为觉得不太好描述,且遇见的问题大多依赖项目的规范,所以就没有记录。
问题描述:表单里有一个下拉选择框,Option是一个包含很多内容的对象,后端要求需要传选择项的多个数据,一开始就在 Select 组件的 Option 选项中传递了一个 JSON 对象作为其 value 属性,以便将该对象的多个属性值一并传递给后端(这里注意不可以直接传递item,item是一个对象,对象不可以作为value值传递),等到提交的时候再处理数据,这样就完成了新增。问题出现在编辑的时候,后端只返回了指定 id 值而没有返回相应的 name 值,那么在编辑时就无法直接回显该信息。
首先想到的办法是编辑的时候前端处理数据,编辑的时候在前端获取到后端返回的 id 值后,可以在列表中查找符合该 id 的数据对象,然后将该对象的属性值设置为 Select 组件的默认值即可,应对数据回显需求。这种方式不算复杂但是我觉得也不太理想,这里就记录一下另一种解决办法。
解决办法:
使用隐藏表单项的方式,下拉选择框的option的value还是设置为id,这样利于回显,将其余需要的字段单独写一个表单项,设为hidden,在下拉选择框的onChange事件,给表单赋值。具体代码如下:
<Form.Item
{...restField}
label="请选择"
name={[name, 'id']}
>
<Select
placeholder="请选择"
onChange={(value, option) => {
form?.setFieldValue([name, 'id'], value);
form?.setFieldValue(['details', name, 'name'],option.children);
}}
>
{list.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
<Form.Item name={[name, 'name']} hidden>
<Input></Input>
</Form.Item>
form?.setFieldValue(['details', name, 'name'],option.children);
这里直接写为form?.setFieldValue([ name, 'name'],option.children)就可以,因为我是动态增删的表单项,循环出了多了form.item,所以加了循环的数组字段。
补充一下:因为这里我只需要id和name,name也就是下拉框的展示数据,所以可以通过option的children取数据。如果还需要其它数据,还可以设置多个隐藏表单项。换一个取值方式:
onChange={(value, option) => {
const selectedOption = list.find(
(item) => item.id === value
);
if (selectedOption) {
form.setFieldsValue({
[`${name}.id`]: value,
[`${name}.name`]: selectedOption.name,
[`${name}.age`]: selectedOption.age,
});
}
}}