如何在Reactjs中将数据从子组件传递到父组件？[副本]

Question

我有两个组件，一个是子组件，另一个是父组件。我正在有条件地撕裂我的子组件。这段代码的功能就是当你们点击按钮时，定时器将显示，当你们点击停止定时器将停止。这里“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;

Answer 1

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

例子：

我的父有一个变量：name；所以我在父组件中设置了一个函数：

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

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

<ChildComponent updateName={this.updateName} />

Answer 2

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

const[time,setTime]=useState(0);
const[timerValue,setTimerValue]=useState(0);
 const handleStart=()=>{
    setTime(true);
 }
const handleStop=()=>{
    setTime(false);
 }

 .....
<button onClick={handleStart}>Start StopWatch</button>
<button onClick={handleStop}>Stop StopWatch</button>
{time?<Timer updateTimerValue={setTimerValue}/>:null}

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

const handleStopTime=()=>{
        console.log(timer);
        props.updateTimer(timer)
        setTimer(0);
    }

Answer 3

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

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>
    )
}