编程知识 cdmana.com

Antd form, name is an array, how to set the value of the input box through setfieldsvalue,

Because I use useState Set the value , The content of the input box cannot be set , So I wonder if I need to use the method of form to set

img

img




Take the answer :

You can refer to

import React, { useRef, useEffect } from "react";import { Form, Input, Button, Select } from "antd";import "./index.less";const { Option } = Select;const layout = {  labelCol: { span: 4 },  wrapperCol: { span: 20 }};const tailLayout = {  wrapperCol: { offset: 8, span: 16 }};function AddFrom(props) {  const formRef = useRef({    name: '',    parentType: '0'  });  const onFinish = values => {    props.onOk(values);    formRef.current.resetFields();  };  const onCancel = () => {    props.onCancel();    formRef.current.resetFields();  };  useEffect(() => {    formRef.current.setFieldsValue({      name: props.name,    });  })  return (    <Form { 
       ...layout} ref={formRef} name='control-hooks' onFinish={onFinish} initialValues={ 
        { 
         name: '', parentType: '0' }} > <Form.Item name='parentType' label=' Classification ' rules={[{ 
         required: true }]} > <Select placeholder=' Please select the category ' allowClear > <Option value='0'> First level classification </Option> </Select> </Form.Item> <Form.Item name='name' label=' Category name ' rules={[ { required: true, whitespace: true, message: " Please enter the classification name !" }, { min: 2, message: " Name at least 2 position " }, { max: 12, message: " Most names 12 position " } ]} > <Input placeholder=' Please enter the classification name ' /> </Form.Item> <Form.Item { 
       ...tailLayout}> <Button type='primary' htmlType='submit'>  determine  </Button> <Button htmlType='button' onClick={onCancel} className='cancelBtn' >  Cancel  </Button> </Form.Item> </Form>  );}export default AddFrom;

版权声明
本文为[CSDN Q & A]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/134/202205072105105614.html

Scroll to Top