从子组件中提取 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。