Блог

     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",
      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;