Javascript 如何在Reactjs中将数据从子组件传递到父组件？

我有两个组件，一个是子组件，另一个是父组件。我正在有条件地撕裂我的子组件。这段代码的功能就是当你们点击按钮时，定时器将显示，当你们点击停止定时器将停止。这里“Timer”是子组件，我在“Timer”组件中使用了state属性，我想在单击“stop Timer button”之前显示Timer的值。那么如何将“timer”状态变量值从子组件传递到父组件呢

 const[time,setTime]=useState(0);
 const handleStart=()=>{
    setTime(true);
 }
const handleStop=()=>{
    setTime(false);
 }
 .....
<button onClick={handleStart}>Start StopWatch</button>
<button onClick={handleStop}>Stop StopWatch</button>
{time?<Timer/>:null}

import React,{useEffect,useState} from 'react';
const Timer = () => {  
    const[timer,setTimer]=useState(0);
    useEffect(()=>{
        setTimeout(()=>{
            setTimer(prevTime=>prevTime+1);
        },100)
    },[timer])
    let style={
        position:"absolute",
        height:"100px",
        weight:"200px",
        backgroundColor:"red",
        zIndex:"1"
    }
    const handleStopTime=()=>{
        console.log(timer);
        setTimer(0);
    }
    return (
        <div style={style}>
            <h1>{timer}</h1>
        </div>
      );
}

export default Timer;

const Parent = () => {
    const [dataState, updateState] = useState('');

    const handler = (data) => {
        updateState(data)
    }

    return (
         <Child someHandlerProp={handler}/>
    )
}

const Child = (props) => {
    return (
        <button onClick={() => props.someHandlerProp('some data')}>Button</button>
    )
}

const[time，setTime]=useState（0）；
常量handleStart=（）=>{
设置时间（真）；
}
常量handleStop=（）=>{
设定时间（假）；
}
.....
启动秒表
秒表
{time？:null}

这是父组件，下面的代码用于“计时器”组件

 const[time,setTime]=useState(0);
 const handleStart=()=>{
    setTime(true);
 }
const handleStop=()=>{
    setTime(false);
 }
 .....
<button onClick={handleStart}>Start StopWatch</button>
<button onClick={handleStop}>Stop StopWatch</button>
{time?<Timer/>:null}

import React,{useEffect,useState} from 'react';
const Timer = () => {  
    const[timer,setTimer]=useState(0);
    useEffect(()=>{
        setTimeout(()=>{
            setTimer(prevTime=>prevTime+1);
        },100)
    },[timer])
    let style={
        position:"absolute",
        height:"100px",
        weight:"200px",
        backgroundColor:"red",
        zIndex:"1"
    }
    const handleStopTime=()=>{
        console.log(timer);
        setTimer(0);
    }
    return (
        <div style={style}>
            <h1>{timer}</h1>
        </div>
      );
}

export default Timer;

const Parent = () => {
    const [dataState, updateState] = useState('');

    const handler = (data) => {
        updateState(data)
    }

    return (
         <Child someHandlerProp={handler}/>
    )
}

const Child = (props) => {
    return (
        <button onClick={() => props.someHandlerProp('some data')}>Button</button>
    )
}

import React，{useffect，useState}来自“React”；
常量计时器=（）=>{
const[timer，setTimer]=useState（0）；
useffect（（）=>{
设置超时（（）=>{
设置计时器（prevTime=>prevTime+1）；
},100)
}，[计时器]）
让风格={
位置：“绝对”，
高度：“100px”，
重量：“200px”，
背景颜色：“红色”，
zIndex：“1”
}
const handleStopTime=（）=>{
控制台日志（计时器）；
设置计时器（0）；
}
返回(
{计时器}
);
}
导出默认定时器；

您可以将函数作为道具传递给子组件

 const[time,setTime]=useState(0);
 const handleStart=()=>{
    setTime(true);
 }
const handleStop=()=>{
    setTime(false);
 }
 .....
<button onClick={handleStart}>Start StopWatch</button>
<button onClick={handleStop}>Stop StopWatch</button>
{time?<Timer/>:null}

import React,{useEffect,useState} from 'react';
const Timer = () => {  
    const[timer,setTimer]=useState(0);
    useEffect(()=>{
        setTimeout(()=>{
            setTimer(prevTime=>prevTime+1);
        },100)
    },[timer])
    let style={
        position:"absolute",
        height:"100px",
        weight:"200px",
        backgroundColor:"red",
        zIndex:"1"
    }
    const handleStopTime=()=>{
        console.log(timer);
        setTimer(0);
    }
    return (
        <div style={style}>
            <h1>{timer}</h1>
        </div>
      );
}

export default Timer;

const Parent = () => {
    const [dataState, updateState] = useState('');

    const handler = (data) => {
        updateState(data)
    }

    return (
         <Child someHandlerProp={handler}/>
    )
}

const Child = (props) => {
    return (
        <button onClick={() => props.someHandlerProp('some data')}>Button</button>
    )
}

const Parent=（）=>{
const[dataState，updateState]=useState（“”）；
常量处理程序=（数据）=>{
房地产（数据）
}
返回(
)
}
const Child=（道具）=>{
返回(
someHandlerProp（'somedata'）}>按钮
)
}

您可以将函数传递给计时器，如下所示：

const[time，setTime]=useState（0）；
常量[timerValue，setTimerValue]=useState（0）；
常量handleStart=（）=>{
设置时间（真）；
}
常量handleStop=（）=>{
设定时间（假）；
}
.....
启动秒表
秒表
{time？:null}

进入计时器后，您可以使用此道具更新父状态：

consthandlestoptime=（）=>{
控制台日志（计时器）；
道具更新器（计时器）
设置计时器（0）；
}

您可以将函数传递给子组件，子组件更新父组件中的值

 const[time,setTime]=useState(0);
 const handleStart=()=>{
    setTime(true);
 }
const handleStop=()=>{
    setTime(false);
 }
 .....
<button onClick={handleStart}>Start StopWatch</button>
<button onClick={handleStop}>Stop StopWatch</button>
{time?<Timer/>:null}

import React,{useEffect,useState} from 'react';
const Timer = () => {  
    const[timer,setTimer]=useState(0);
    useEffect(()=>{
        setTimeout(()=>{
            setTimer(prevTime=>prevTime+1);
        },100)
    },[timer])
    let style={
        position:"absolute",
        height:"100px",
        weight:"200px",
        backgroundColor:"red",
        zIndex:"1"
    }
    const handleStopTime=()=>{
        console.log(timer);
        setTimer(0);
    }
    return (
        <div style={style}>
            <h1>{timer}</h1>
        </div>
      );
}

export default Timer;

const Parent = () => {
    const [dataState, updateState] = useState('');

    const handler = (data) => {
        updateState(data)
    }

    return (
         <Child someHandlerProp={handler}/>
    )
}

const Child = (props) => {
    return (
        <button onClick={() => props.someHandlerProp('some data')}>Button</button>
    )
}

例如：

我的父母有一个变量：name； 因此，我将父组件中的函数设置为：

updateName = (newValue) => {
    this.setState({
                name: newValue,
            });
    } 

然后我调用我的子组件，给他props中的函数，这样他就可以修改这个值：

<ChildComponent updateName={this.updateName} />

没有，但下面的答案是正确的。您的答案不够清楚，但我使用以下答案之一解决了问题。