javascript - 如何在反应JavaScript中将id传递给navlink
问题描述
我正在从数据库中获取详细信息并显示在页面上,我想创建一个编辑按钮,单击后可以以可编辑的形式打开该详细信息。在我的情况下,可编辑的表单是(EMPLOYEEFORM)。
您能否建议如何将 id 传递给编辑按钮,以便该按钮可以将数据带到编辑区域。
我有问题。对,我没有将 id 传递给 navlink,但它给了我错误,比如找不到具有此 id 的员工。我是reactjs 新手。我尝试传递 id 值,但它不能正常工作,我不太清楚将 id 传递到 navlink 或按钮。您能否建议一些直接代码或有价值的链接,我可以在哪里更新我的知识。
import React, { useEffect, useState } from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import { getEmployeeDetails } from '../../shared/services/apiService';
import { useParams, NavLink, Redirect } from 'react-router-dom';
import { Descriptions , Card , Divider, Row , Col , Button} from 'antd';
import { isSuccess } from '../../shared/utils/jsHelper';
import { EditTwoTone } from '@ant-design/icons';
const { Meta } = Card;
const employeeDescription = () => {
const {id} = useParams();
const [loading, setLoading] = useState(false);
const [empName, setEmpName] = useState([]);
const [empEmail, setEmpEmail] = useState([]);
const [empPhone, setEmpPhone] = useState([]);
useEffect(() => {
if (id) {
getEmployee();
}
}, [id]);
const getEmployee = () => {
setLoading(true);
getEmployeeDetails(id).then((resp) => {
if (isSuccess(resp)) {
const employee = resp.data.data;
setEmployeeValues(employee);
}
}).finally(() => setLoading(false));
};
const setEmployeeValues = (employee) => {
setEmpName(employee.empName);
setEmpEmail(employee.empEmail);
setEmpPhone(employee.empPhone);
};
return(
<div>
<Card
title="Employee Info"
extra={[
<NavLink to={'${routePaths.EMPLOYEEFORM}/${employee.id}'} className="lin">
<Button key="1">
<EditTwoTone twoToneColor="#000" /> Edit Employee Details
</Button>
</NavLink>,
<NavLink to={routePaths.EMPLOYEES} className="lin">
<Button key="2">
{'<<'} Back to Employee List
</Button>
</NavLink>,
]}
>
<h6>
<strong>Pesonal Details :</strong>
</h6>
<Divider />
<Descriptions className="card-tis">
<Descriptions.Item label="Name ">{empName}</Descriptions.Item>
<Descriptions.Item label="Email ">{empEmail}</Descriptions.Item>
<Descriptions.Item label="Phone ">{empPhone}</Descriptions.Item>
</Descriptions>
</Card>
</div>
);
};
export default employeeDescription;
解决方案
您可以将所有状态合并为一个state
,employee
而不是为每个员工属性维护状态。
在提供的代码中,您在导航链接中使用signle (')
引号而不是backticks
. 这不会解析变量,您将得到一个纯字符串,如${routePaths.EMPLOYEEFORM}/${employee.id}
.
我做了一些更改,请尝试。
import React, { useEffect, useState } from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import { getEmployeeDetails } from '../../shared/services/apiService';
import { useParams, NavLink, Redirect } from 'react-router-dom';
import { Descriptions, Card, Divider, Row, Col, Button } from 'antd';
import { isSuccess } from '../../shared/utils/jsHelper';
import { EditTwoTone } from '@ant-design/icons';
const { Meta } = Card;
const employeeDescription = () => {
const { id } = useParams();
const [loading, setLoading] = useState(false);
const [employee, setEmployee] = useState({});
useEffect(() => {
if (id) {
getEmployee();
}
}, [id]);
const getEmployee = () => {
setLoading(true);
getEmployeeDetails(id)
.then((resp) => {
if (isSuccess(resp)) {
const employee = resp.data.data;
setEmployee(employee);
}
})
.finally(() => setLoading(false));
};
return (
<div>
<Card
title="Employee Info"
extra={[
<NavLink to={`${routePaths.EMPLOYEEFORM}/${employee.id}`} className="lin">
<Button key="1">
<EditTwoTone twoToneColor="#000" /> Edit Employee Details
</Button>
</NavLink>,
<NavLink to={routePaths.EMPLOYEES} className="lin">
<Button key="2">
{'<<'} Back to Employee List
</Button>
</NavLink>,
]}
>
<h6>
<strong>Pesonal Details :</strong>
</h6>
<Divider />
<Descriptions className="card-tis">
<Descriptions.Item label="Name ">{employee.empName}</Descriptions.Item>
<Descriptions.Item label="Email ">{empEmail.empEmail}</Descriptions.Item>
<Descriptions.Item label="Phone ">{empPhone.empPhone}</Descriptions.Item>
</Descriptions>
</Card>
</div>
);
};
export default employeeDescription;
推荐阅读
- javascript - 对每个应用一个 CSS 类
- 循环遍历元素
- python - 如何从输入中获取多个值并从标准输出中显示最大值?
- c++ - C ++:如何将枚举元素设置为无限?
- regex - 包含特定内联样式的锚标记的正则表达式
- mainframe - 按数据分组时如何同时使用sum和max?
- ios - iOS-斯威夫特 4。- 更新了未在函数中使用的 UIButton 标签标题
- java - (Java) 在另一个类的方法上使用导入的类构造函数
- bash - bash:无法从远程 url 获取文件大小
- android - 单击后退按钮时重复值 - 已修复
- mongodb - 为什么在 windows 10 成功安装后程序文件中没有生成 MongoDB 文件夹?