如何解决React Select Use State设置两个不同的值
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来完成此任务。我似乎找不到任何可以向我显示如何为同一对象设置两个不同值的东西。有人可以给我一些指导吗?
解决方法
我假设您希望选择每天的开始和结束时间,并将其存储在状态中。
这是一个可能的解决方案。让我知道是否是您想要的,然后我会详细说明
import React,{ useEffect } from "react";
import { useState } from "react";
const SlctForm = () => {
const [empHrs,setEmpHrs] = useState([
{
day: "monday",start: null,end: null
},{
day: "tuesday",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,"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,"end")}
>
<option value={7}>7</option>
<option value={9}>9</option>
</select>
</form>
</div>
);
};
export default SlctForm;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。