react搜索

1.   const data = [
2.     {
3. "id": 1,
4. "name": "王武",
5. "tel": "111111",
6. "project_id": 5,
7. "labor_type": 1,
8. "jobs": "1234岗位",
9. "grade": 39,
10. "pname": "项目三",
11. "status": 0
12.     },
13.     {
14. "id": 2,
15. "name": "王温",
16. "tel": "223212",
17. "project_id": 6,
18. "labor_type": 0,
19. "jobs": "111",
20. "grade": 0,
21. "pname": "项目四",
22. "status": 0
23.     },
24.     {
25. "id": 3,
26. "name": "前往",
27. "tel": "123123",
28. "project_id": 2,
29. "labor_type": 0,
30. "jobs": "111",
31. "grade": 0,
32. "pname": null,
33. "status": 0
34.     },
35.     {
36. "id": 4,
37. "name": "测试",
38. "tel": "454545",
39. "project_id": 6,
40. "labor_type": 0,
41. "jobs": "12",
42. "grade": 0,
43. "pname": "项目四",
44. "status": 0
45.     },
46.     {
47. "id": 5,
48. "name": "小黑",
49. "tel": "454545",
50. "project_id": 93,
51. "labor_type": 0,
52. "jobs": "9",
53. "grade": 0,
54. "pname": "冰海恋雨",
55. "status": 0
56.     },
57.     {
58. "id": 6,
59. "name": "趣味",
60. "tel": "565656",
61. "project_id": 6,
62. "labor_type": 1,
63. "jobs": "1123",
64. "grade": 25,
65. "pname": "项目四",
66. "status": 1
67.     },
68.     {
69. "id": 6,
70. "name": "有趣",
71. "tel": "565656",
72. "project_id": 6,
73. "labor_type": 1,
74. "jobs": "1123",
75. "grade": 25,
76. "pname": "项目四",
77. "status": 1
78.     }
79. ]

1. <div>
2. <div>
3. <input
4. type="text"
5.         onChange={(e) => shos(e.target.value)}
6.         placeholder="请输入搜索关键字"
7. />
8. <ul>
9. <table>
10.         {shuju.map(item => (
11. <li key={item.id}>
12. <tr>
13. <td>{item.name}</td>&nbsp;
14. <td>{item.tel}</td>&nbsp;
15. <td>{item.jobs}</td>&nbsp;
16. <td>{item.pname}</td>&nbsp;
17. </tr>
18. 
19. </li>
20.         ))}
21. </table>
22. </ul>
23. </div>
24. </div>

1. const [shuju,setShuju] = useState(data);
2. const shos = (s) => {
3.   const sho = data.filter(iie=>
4.     iie.name.toLowerCase().includes(s.toLowerCase())
5.     )
6.     setShuju(sho)
7.     console.log(sho);
8. }

1. import React, { useState } from "react";
2. 
3. export default function Sports_event() {
4.   const data = [
5.     {
6. "id": 1,
7. "name": "王武",
8. "tel": "111111",
9. "project_id": 5,
10. "labor_type": 1,
11. "jobs": "1234岗位",
12. "grade": 39,
13. "pname": "项目三",
14. "status": 0
15.     },
16.     {
17. "id": 2,
18. "name": "王温",
19. "tel": "223212",
20. "project_id": 6,
21. "labor_type": 0,
22. "jobs": "111",
23. "grade": 0,
24. "pname": "项目四",
25. "status": 0
26.     },
27.     {
28. "id": 3,
29. "name": "前往",
30. "tel": "123123",
31. "project_id": 2,
32. "labor_type": 0,
33. "jobs": "111",
34. "grade": 0,
35. "pname": null,
36. "status": 0
37.     },
38.     {
39. "id": 4,
40. "name": "测试",
41. "tel": "454545",
42. "project_id": 6,
43. "labor_type": 0,
44. "jobs": "12",
45. "grade": 0,
46. "pname": "项目四",
47. "status": 0
48.     },
49.     {
50. "id": 5,
51. "name": "小黑",
52. "tel": "454545",
53. "project_id": 93,
54. "labor_type": 0,
55. "jobs": "9",
56. "grade": 0,
57. "pname": "冰海恋雨",
58. "status": 0
59.     },
60.     {
61. "id": 6,
62. "name": "趣味",
63. "tel": "565656",
64. "project_id": 6,
65. "labor_type": 1,
66. "jobs": "1123",
67. "grade": 25,
68. "pname": "项目四",
69. "status": 1
70.     },
71.     {
72. "id": 6,
73. "name": "有趣",
74. "tel": "565656",
75. "project_id": 6,
76. "labor_type": 1,
77. "jobs": "1123",
78. "grade": 25,
79. "pname": "项目四",
80. "status": 1
81.     }
82. ]
83. const [shuju,setShuju] = useState(data);
84. const shos = (s) => {
85.   const sho = data.filter(iie=>
86.     iie.name.toLowerCase().includes(s.toLowerCase())
87.     )
88.     setShuju(sho)
89.     console.log(sho);
90. }
91. 
92. return (
93. <div>
94. 
95. <div>
96. <input
97. type="text"
98.         onChange={(e) => shos(e.target.value)}
99.         placeholder="请输入搜索关键字"
100. />
101. <ul>
102. <table>
103. 
104.         {shuju.map(item => (
105. <li key={item.id}>
106. 
107. <tr>
108. <td>{item.name}</td>&nbsp;
109. <td>{item.tel}</td>&nbsp;
110. <td>{item.jobs}</td>&nbsp;
111. <td>{item.pname}</td>&nbsp;
112. </tr>
113. 
114. </li>
115.         ))}
116. </table>
117. </ul>
118. </div>
119. 
120. 
121. </div>
122.   )
123. }