從子組件中提取 setState，然后將其用作父組件中的值

Question

我創建了一個秒表，並試圖獲取秒表的值並將其傳遞給表單組件。 目前，當嘗試使用“道具”推動它時，它沒有連接到 StopWatch 組件中確定的特定“setTime”常量。

我在整個項目中使用 react-hook-form 和 Styled Components。 目前我的 controller 中沒有任何東西通過我的“價值”，因為我想做的一切都行不通。

這是秒表組件：

import React, { useEffect, useState } from "react";

const StopWatch = (props) => {
  const [time, setTime] = useState(0);
  const [timerOn, setTimeOn] = useState(false);

  useEffect(() => {
    let interval = null;

    if (timerOn) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime + 10);
      }, 10);
    } else {
      clearInterval(interval);
    }

    return () => clearInterval(interval);
  }, [timerOn]);

  //   const updateTimeLogged = (e) => {
  //     props.setTimeOn(e.target.value);
  //   };

  return (
    <div>
      <div>
        <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
        <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span>
        <span>{("0" + ((time / 10) % 100)).slice(-2)}</span>
      </div>
      <div>
        {!timerOn && time === 0 && (
          <button onClick={() => setTimeOn(true)}>Start</button>
        )}
        {timerOn && <button onClick={() => setTimeOn(false)}>Stop</button>}
        {!timerOn && time !== 0 && (
          <button onClick={() => setTimeOn(true)}>Resume</button>
        )}
        {!timerOn && time > 0 && (
          <button onClick={() => setTime(0)}>Reset</button>
        )}
      </div>
    </div>
  );
};

export default StopWatch;

這是我的表單組件：

import {
  Button,
  Form,
  Input,
  GridContainer,
  Label,
  InputWrapper,
  DateWrapper,
  NotesWrapper,
  StopWatchWrapper,
} from "./PracticeLog.styled";
import { useForm, Controller } from "react-hook-form";
import { useState } from "react";
import StopWatch from "./StopWatch";



const PracticeLogInput = (props) => {
  const { register, handleSubmit, control } = useForm();
  const [result, setResult] = useState("");

  const onSubmit = (data) => console.log(data);

 

  return (
    <GridContainer>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <DateWrapper>
          <Label>Date</Label>
          <Input type="date" {...register("Date")} placeholder="Date"></Input>
        </DateWrapper>
        <NotesWrapper>
          <Label>Notes</Label>
          <Input type="text" {...register("Notes")} placeholder="Notes"></Input>
        </NotesWrapper>
        <StopWatchWrapper>
          <Controller
            name="time"
            control={control}
            onChange={(e) => setInterval(e.target.value)}
            value={}  //<-- this is where I need to put the value I get from 'setTime' in '/.StopWatch'.
            render={StopWatch}
          />
        </StopWatchWrapper>
        <Button type="Submit">Submit</Button>
      </Form>
    </GridContainer>
  );
};

export default PracticeLogInput;

如果您看到任何我可以改進的地方，請告訴我。

Answer 1

嘗試使用此代碼，但您的代碼有點復雜嘗試使其更簡單兄弟

    import {
  Button,
  Form,
  Input,
  GridContainer,
  Label,
  InputWrapper,
  DateWrapper,
  NotesWrapper,
  StopWatchWrapper,
} from "./PracticeLog.styled";
import { useForm, Controller } from "react-hook-form";
import { useState } from "react";
import StopWatch from "./StopWatch";



const PracticeLogInput = (props) => {
  const { register, handleSubmit, control } = useForm();
  const [time, setTime] = useState(0)
  const [result, setResult] = useState("");

  const onSubmit = (data) => console.log(data);

 

  return (
    <GridContainer>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <DateWrapper>
          <Label>Date</Label>
          <Input type="date" {...register("Date")} placeholder="Date"></Input>
        </DateWrapper>
        <NotesWrapper>
          <Label>Notes</Label>
          <Input type="text" {...register("Notes")} placeholder="Notes"></Input>
        </NotesWrapper>
        <StopWatchWrapper>
          <Controller
            name="time"
            control={control}
            onChange={(e) => setInterval(e.target.value)}
            value={time}  //<-- this is where I need to put the value I get from 'setTime' in '/.StopWatch'.
            render={<StopWatch
time={time}
setTime={setTime}
/>}
          />
        </StopWatchWrapper>
        <Button type="Submit">Submit</Button>
      </Form>
    </GridContainer>
  );
};

export default PracticeLogInput;

在 StopWatch 組件中更改這樣的代碼

    const StopWatch = (props) => {
      const {time,setTime}=props
      const [timerOn, setTimeOn] = useState(false

);
//rest

注意：流程就像父母到孩子一樣，您不能直接將 state 從孩子拉到父母，而是在父母中定義 state 並將其作為道具傳遞給孩子。 並使用道具本身從孩子更改 state。