react antd Form.List动态设置默认值

最新推荐文章于 2024-11-16 21:52:49 发布

原创最新推荐文章于 2024-11-16 21:52:49 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #react.js

文章描述了如何使用React的Form组件和useStateHook实现两个Select下拉框的级联选择，当第一个Select发生变化时，会自动更新并设置第二个Select的默认值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：代码中的两个select是级联的，切换第一个select的内容会设置第二个select的默认值

js部分

const [form] = Form.useForm();

const cityData = ['kafka1', 'testTwo'];

const logassetData = {

kafka1: ['logasset', '测试222'],

testTwo: ['测试一一一', '测试二二二'],

};

const [cities, setCities] = useState(logassetData[cityData[0]]);

const [secondCity, setSecondCity] = useState(logassetData[cityData[0]][0]);

const [open, setOpen] = useState(true);

//下拉框级联

const handleProvinceChange = (value, key) => {

//change时设置默认值

const fields = form.getFieldsValue();

const { ziduan } = fields; //ziduan是Form.List的name,需要拿出来重新组装下数据

if (value) {

Object.assign(ziduan[key], { logasset: logassetData[value][0] })

form.setFieldsValue({ ziduan })

setSecondCity(logassetData[value][0]);

setCities(logassetData[value]);//设置第二个下拉框的默认值

}

};

const onSecondCityChange = (value) => {

setSecondCity(value);

};

html部分

{/* 初始化默认展示两行，默认展示几行就在initialValue下写几个对象，好像可以设置数字，不过我没试过*/}

<Form.List name="ziduan" initialValue={[{ logasset: secondCity }, { logasset: secondCity }]}>

{(fields, { add, remove }) => (

<Row>

表

</Col>

</Row>

{fields.map(({ key, name, ...restField }) => (

<Row

style={{ width: '100%' }}

<Form.Item

name={[name, 'kafka1']}

{...restField}

rules={[

{

required: true,

message: 'kafka1不能为空',

]}

<Select

allowClear

options={cityData.map((province) => ({

label: province,

value: province,

}))}

onChange={(e) => handleProvinceChange(e, key)}

defaultValue={cityData[0]}

</Select>

</Form.Item>

</Col>

<Form.Item

name={[name, 'logasset']}

{...restField}

rules={[

{

required: true,

message: 'logasset不能为空',

]}

<Select

allowClear

onChange={onSecondCityChange}

options={cities.map((city) => ({

label: city,

value: city,

}))}

</Select>

</Form.Item>

</Col>

<div

onClick={() => remove(name)}

style={{ margin: '4px 0px 0px 12px' }}

</div>

</Col>

</Row>

</div>

))}

<Button

type="dashed"

onClick={() => add({ logasset: cities[0] })}

block

icon={<PlusOutlined />}

style={{ marginBottom: '20px' }}

</Button>

</Col>

</Row>

</div>

)}

</Form.List>

</Form>

// rules只有在设置了name属性之后才生效，如不需要展示lable，则*也会消失，需要设置css样式即可

.target::before {

display: inline-block;

margin-right: 4px;

color: #ff4d4f;

font-size: 14px;

font-family: SimSun, sans-serif;

line-height: 1;

content: '*';

}