react子向父组件传值
时间: 2023-09-10 16:12:00 浏览: 73
在 React 中,子组件向父组件传值的常用方式是通过回调函数。下面是一个简单的示例,演示了子组件向父组件传递值的过程:
父组件:
```jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [valueFromChild, setValueFromChild] = useState('');
const handleChildValue = (value) => {
setValueFromChild(value);
};
return (
<div>
<h2>Value from child: {valueFromChild}</h2>
<ChildComponent onChildValue={handleChildValue} />
</div>
);
};
export default ParentComponent;
```
子组件:
```jsx
import React, { useState } from 'react';
const ChildComponent = ({ onChildValue }) => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
const handleButtonClick = () => {
onChildValue(inputValue);
setInputValue('');
};
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<button onClick={handleButtonClick}>Submit</button>
</div>
);
};
export default ChildComponent;
```
在这个示例中,父组件包含一个状态 `valueFromChild`,子组件包含一个输入框和一个按钮。当用户在子组件的输入框中输入文本并点击按钮时,子组件会调用父组件传递的回调函数 `onChildValue`,将输入的值作为参数传递给父组件。父组件接收到这个值后,更新自己的状态 `valueFromChild`,并将其展示在页面上。
通过这种方式,子组件可以将数据传递给父组件,实现了子向父的值传递。