React Select 使用 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

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

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

CodeSandbox

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;