import React, { useEffect, useState } from 'react';
import { EmployeeList } from '../EmployeeList/EmployeeList';
export default function EmployeeMenu(props) {
const [employeeList, setEmployeeList] = useState(() => new EmployeeList());
useEffect(() => employeeList.getEmployees(), [employeeList]);
const handleEmployeeChange = (event, data) => {
props.setEmployee(event.target.value);
console.log(event.target.value);
}
function EmployeeMenu() {
let temp = employeeList.employees.map((employee) => (
<div>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</div>
));
return temp;
}
return(
<form onChange={handleEmployeeChange}>
<EmployeeMenu />
</form>
);
}
代碼產生
這就是代碼產生的。這接近我想要完成的任務，但是當我選擇不同的員工時，我的單選按鈕不會選中/取消選中。
那是因為當我映射來自employeeList 陣列的資訊時，我將每個輸入和標簽都放在一個單獨的div 中。但是如果我不包裝它們，我會得到“JSX 運算式必須有一個父元素”。有沒有人對我如何更好地映射陣列中的單選按鈕有任何建議，以便它們保持在同一個表單組中？
uj5u.com熱心網友回復：
在“form”元素內部，它必須是表單元素（輸入）的型別。但 div 不是表單元素的型別，所以它有一個警告。下面的代碼是正確的：
<form onChange={handleEmployeeChange}>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</form>
如果你想把它打包成一個組件；你的代碼應該像：
function EmployeeMenu() {
let temp = employeeList.employees.map((employee) => (
<>
<input type="radio" id={employee.phone_number} name="employee_name" value={employee.first_name} />
<label htmlFor={employee.phone_number}>{employee.first_name} {employee.last_name}</label>
</>
));
return temp;
}
return(
<form onChange={handleEmployeeChange}>
<EmployeeMenu />
</form>
);
uj5u.com熱心網友回復：
您的EmployeeMenu函式被視為FC（功能組件）。你應該要么
temp用反應片段包裝回傳：return <>{temp}</>;或者只是將其稱為函式，而不是組件：
<form onChange={handleEmployeeChange}> {EmployeeMenu()} </form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524041.html
標籤：反应形式成分映射jsx
上一篇：main.ts:11ERROR錯誤：沒有名稱的表單控制元件的值訪問器：“密碼”
下一篇：表單集中的每個表單驗證