React Select Use State可设置两个不同的值

Question

import React from 'react'
import {useState} from 'react'

const SlctForm = () => {
const [empHrs, setEmpMonHrs] = useState({
day: null,
start: null,
end: null
})

const onHrChange = (event) => {
setEmpHrs({
day: event.target.name,
start: event.target.value,
end: event.target.value
})

}

return (
<div>
<form>
<select name='monday' onChange={onHrChange}>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select name='monday' onChange={onHrChange}>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select name='tuesday' onChange={onHrChange}>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select name='tuesday' onChange={onHrChange}>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
</form>

</div>
)
}

export default SlctForm

我正在尝试创建一个包含对象的数组，这些对象应该包含每天的工作日、开始和结束时间。我认为最好使用select来实现这一点。我似乎找不到任何东西可以告诉我如何为同一个对象设置两个不同的值。有人能告诉我这里的方向吗？

Answer 1

我假设您希望为每天选择一个开始和结束时间，并将其存储在状态中。

这里有一个可能的解决方案。如果这是你想要的，请告诉我，然后我会详细说明

代码沙盒

import React, { useEffect } from "react";
import { useState } from "react";
const SlctForm = () => {
const [empHrs, setEmpHrs] = useState([
{
day: "monday",
start: null,
end: null
},
{
day: "tuesday",
start: null,
end: null
}
]);
useEffect(() => {
console.log(empHrs);
}, [empHrs]);
const onHrChange = (value, day, timeOfDay) => {
setEmpHrs((prevState) => {
let newState = [...prevState];
const dayIndex = newState.findIndex((emp) => emp.day === day);
newState[dayIndex] = {
...newState[dayIndex],
[timeOfDay]: value
};
return newState;
});
};
return (
<div>
<form>
<select
name="mondayStart"
onChange={(e) => onHrChange(e.target.value, "monday", "start")}
>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select
name="mondayEnd"
onChange={(e) => onHrChange(e.target.value, "monday", "end")}
>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select
name="tuesdayStart"
onChange={(e) => onHrChange(e.target.value, "tuesday", "start")}
>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
<select
name="tuesdayEnd"
onChange={(e) => onHrChange(e.target.value, "tuesday", "end")}
>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
</form>
</div>
);
};
export default SlctForm;