react antd对话框里面input的数据回显

需求是，点击表格中的名字，弹出对话框，然后可以修改名字。

如下两图：

​​​​​​​

 

 

 因为姓名那里是在表格里面，直接借助antd中的API，设置columns中，使用render可以拿到你点击的内容，这个方法有三个参数，因为我当前需求只会用到text这个参数，还有两个就不说了。

 // 表格表头
    const columns = [
        {
            title: '编号',
            dataIndex: 'count_id',
        },
        {
            title: '姓名',
            dataIndex: 'count_name',
            render: (text) => <a onClick={() => {
                 // 点击出现对话框
                setIsModifyName(true)
                console.log(text);
            }}>{text}</a>,
        }
         

因为要点击出现一个对话框，项目中为了方便，我自己再把对话框再次封装了一遍。<ModalCustom/>就是再次封装的对话框

{/* 修改姓名 */}
                        <ModalCustom
                            title='修改姓名'
                            visible={isModifyName}
                            onCreate={modifyName}
                            onCancel={() => {
                                // 重置表单
                                ModifyNameForm.resetFields()
                                setIsModifyName(false);
                            }}
                            form={ModifyNameForm}
                            // 定义插槽
                            customFrom={
                                <Form
                                    form={ModifyNameForm}
                                    layout="vertical"
                                    name="ModifyCountryForm"
                                >
                                    <Form.Item
                                        name="name"
                                        label="名字"
                                        rules={[
                                            {
                                                required: true,
                                                message: '名子不能为空',
                                            }
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                </Form>
                            }

对话框中我用到了表单

// 判断修改名字对话框是否显示
    const [isModifyName, setIsModifyName] = useState(false)
    // 修改名字的表单
    const [ModifyNameForm] = Form.useForm();
    // 修改名字的确认按钮
    const modifyName = (values) => {
        console.log(values);
        setIsModifyName(false)
    }

 一切代码完成后，在第一个代码片段中，我们用render方法可以点击获取到你点击文字的值，那么接下来只需要使得这个值出现在input中就行了。

最开始我使用useState定义了一个变量

const [name,setName] = useState('')

然后直接把这个值给到input里面。

<Input value={name} />

然后点击的时候在第一个代码片段中render使用setName设置

 // 表格表头
    const columns = [
        {
            title: '编号',
            dataIndex: 'count_id',
        },
        {
            title: '姓名',
            dataIndex: 'count_name',
            render: (text) => <a onClick={() => {
                   setName(text)
                 // 点击出现对话框
                setIsModifyName(true)
                console.log(text);
            }}>{text}</a>,
        }

但是这样点击出来后，input里面是没有任何内容的，原因是<Input>在<Form>中是受到form控制的。

这里是官方文档的原话：

被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管

然后我又在Form中寻找方法。

最开始使用initialValues设置里里面的值，然后用setName修改，但是这样导致了当你点击张三的名字后，再点击李四的名字，出现的还是张三的名字，然后点击取消的一瞬间，才会重新渲染成李四的名字，后来，我看到了下面的话，

你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

 所以我们之前设置的表单名字后

直接在render中使用setFieldsValue这个方法就好了

 render: (text) => <a onClick={() => {
                setIsModifyName(true)
                // 设置修改框中的文字
                ModifyNameForm.setFieldsValue({
                    name: text
                })
                console.log(text);
            }}>{text}</a>,