需求是,点击表格中的名字,弹出对话框,然后可以修改名字。
如下两图:
因为姓名那里是在表格里面,直接借助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>,