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

我假设您希望 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",
      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;

React Select 使用State设置两个不同的值

React Select Use State to set two different values

forms

reactjs

react-select

use-state