根据选择选项React填写禁用的表单输入

Question

我正在构建一个表单，该表单包含一个选择组件，该组件用API MySQL"的数组包装；得到"；呼叫数组包含3个项目；userID、firstName和lastName。

在进行选择时，选择输入的值被设置为所选择的用户ID，然后该用户ID被发送回同一API。我在select组件的正下方还有两个禁用的输入字段，我想根据用户选择的选项自动填充firstName和lastName。

使用的状态：

const [userID, setUserID] = useState("");
const [studentOption, setStudentOption] = useState([]);
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");

useEffect设置所选组件的状态

useEffect(() => {
const config = {
headers: { "x-auth-token": token },
};
const fetchData = async () => {
const results = await api.get("/students/userID", config);
setStudentOption(results.data);
};
fetchData();
}, [setStudentOption, token]);

选择组件：

<select
className="form-select"
aria-label="Default select example"
onChange={(e) => setUserID(e.target.value)}
>
<option>Select Student User Account</option>
{studentOption.map((studentOption) => (
<option key={studentOption.userID} value={studentOption.userID}>
{studentOption.firstName} {studentOption.lastName}
</option>
))}
</select>

两个输入字段

<div className="row">
<div className="col-md-6">
<input
disabled
type="text"
className="form-control"
placeholder="Student First Name"
onChange={(e) => setFirstName(e.target.value)}
value={firstName}
/>
</div>
<div className="col-md-6">
<input
disabled
type="text"
className="form-control"
placeholder="Student Last Name"
onChange={(e) => setLastName(e.target.value)}
value={lastName}
/>
</div>
</div>

获取查询的API控制器

export const studentID = (req, res) => {
db.query(
"SELECT userID, firstName, lastName  FROM userIndex WHERE role = 'student' ORDER BY firstName ASC;",
(err, rows) => {
if (!err) {
res.send(rows);
} else {
console.log(err).res.send({ alert: err });
}
}
);
};

我不太清楚这一次的正确状态变化。如果有任何帮助，我将不胜感激！如果我能提供更多的代码，请告诉我——提前谢谢。

Answer 1

我想studentOptions数组看起来像这样。[{'id'：'12'，'name'：'u'，'name]：'r'}，{'id'：'123'，'name'：'surya'，'names'：'r'}]然后你可以像下面这样尝试。

<select
className="form-select"
aria-label="Default select example"
onChange={(e) => {
setUserID(e.target.value)
setFirstName(studentOption.filter((s)=>s.id===e.target.id)[0].fname)
setLastName(studentOption.filter((s)=>s.id===e.target.id)[0].fname)
}}
>

请注意，每次用户更改选择时，都会更改名字和姓氏。

让我知道studentOption是否有不同的结构，或者如果你可以共享一个代码沙盒，我们可以检查最佳解决方案。

Answer 2

找到了问题的解决方案。

在select组件中，我将所有内容都保留为如上所述。它所做的只是设置userID状态。

然后，我用if语句实现了一个useEffect钩子，为firstName和lastName值调用API，并将它们设置在状态中，使用userID状态值作为依赖项。如果userID为null，则useEffect不会运行，反之亦然。

选择组件

<select
className="form-select"
aria-label="Default select example"
onChange={(e) => setUserID(e.target.value)}
>
<option>Select Student User Account</option>
{studentOption.map((studentOption) => (
<option key={studentOption.userID} value={studentOption.userID}>
{studentOption.firstName} {studentOption.lastName}
</option>
))}
</select>;

使用效果挂钩

useEffect(() => {
const config = {
headers: { "x-auth-token": token },
};
const fetchData = async () => {
const results = await api.get("/students/studentadd/" + userID, config);
setFirstName(results.data[0].firstName);
setLastName(results.data[0].lastName);
};
if (userID) {
fetchData();
}
}, [userID, token]);

我希望这能帮助任何在同一问题上挣扎的人。请注意，这可能会调用另一个API调用，因此服务器的使用可能会受到影响。

如果有人有更优雅的解决方案，我会洗耳恭听。