我正在处理一个 React 项目,在我的项目中,我有两个组件,它们是 App 和 Child。应用程序是父组件,子组件是子组件。
现在,当我单击子组件上的按钮时,我更改了子组件中的状态。
现在我的目标是如何为父组件按钮传递子组件的最新状态。
我不知道如何做到这一点,请帮助我
这是 App.js
import React from 'react';
import './App.css';
import Child from './Child/Child';
function App() {
return(
<div className='container'>
<div className='row'>
<button className='btn btn-primary'>Click here</button>
<Child></Child>
</div>
</div>
)
}
export default App
这是 Child.js
import React, { useState } from 'react';
import './Child.css';
function Child() {
const [color, setColor] = useState('yellow');
const [textColor, setTextColor] = useState('white');
return (
<div className='container'>
<div className='row'>
<button style={{ background: color, color: textColor }}
onClick={()=>{setColor("black");setTextColor('red')}}className='btn btn-danger mt-5'>Click here</button>
</div>
</div>
)
}
export default Child
如果您觉得我的疑问不清楚,请发表评论。谢谢你。