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

Question

我有两个组件，一个是子组件，另一个是父组件。我有条件地撕裂我的子组件。此代码的功能是，当您单击按钮时，计时器将显示，当您单击停止计时器时，计时器将停止。这里的"计时器"是子组件，我在"计时器"组件中使用了状态属性，我想在单击"停止计时器按钮"之前显示计时器的值。那么如何将"计时器"状态变量值从子组件传递到父组件。

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

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

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

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}

在你之后 计时器 您可以使用此 prop 更新父状态：

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

Answer 3

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

例：

我的父母有一个变量：名称; 所以我在父组件中将一个函数设置为：

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

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

<ChildComponent updateName={this.updateName} />