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来完成此任务。我似乎找不到任何可以向我显示如何为同一对象设置两个不同值的东西。有人可以给我一些指导吗？

解决方法

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

这是一个可能的解决方案。让我知道是否是您想要的，然后我会详细说明

CodeSandbox

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;