react父组件如何获取子组件的值
使用回调函数传递数据
父组件可以通过向子组件传递一个回调函数来获取子组件的值。子组件在需要时将数据作为参数调用该回调函数。
父组件示例：
function Parent() {
const handleChildValue = (value) => {
console.log('Received value from child:', value);
};
return <Child onValueChange={handleChildValue} />;
}子组件示例：
function Child({ onValueChange }) {
const [value, setValue] = useState('');
const handleChange = (e) => {
const newValue = e.target.value;
setValue(newValue);
onValueChange(newValue);
};
return <input value={value} onChange={handleChange} />;
}使用ref获取子组件实例
当子组件是类组件时，可以通过ref直接访问子组件的实例和方法。
父组件示例：
function Parent() {
const childRef = useRef(null);
const handleClick = () => {
const childValue = childRef.current.getValue();
console.log('Child value:', childValue);
};
return (
<>
<Child ref={childRef} />
<button onClick={handleClick}>Get Child Value</button>
</>
);
}子组件示例（类组件）：
class Child extends React.Component {
state = { value: '' };
getValue = () => {
return this.state.value;
};
render() {
return <input value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />;
}
}
export default React.forwardRef((props, ref) => <Child {...props} ref={ref} />);使用状态管理工具
在复杂应用中，可以使用Redux、MobX或Context API等状态管理工具共享父子组件间的状态。
Context API示例：
const ValueContext = createContext();
function Parent() {
const [value, setValue] = useState('');
return (
<ValueContext.Provider value={{ value, setValue }}>
<Child />
<div>Parent received: {value}</div>
</ValueContext.Provider>
);
}
function Child() {
const { setValue } = useContext(ValueContext);
return <input onChange={(e) => setValue(e.target.value)} />;
}使用自定义事件
可以通过自定义事件实现父子组件间的通信，适用于解耦较深的组件层级。
父组件示例：
function Parent() {
useEffect(() => {
const handleCustomEvent = (e) => {
console.log('Custom event value:', e.detail);
};
window.addEventListener('childEvent', handleCustomEvent);
return () => window.removeEventListener('childEvent', handleCustomEvent);
}, []);
return <Child />;
}子组件示例：
function Child() {
const [value, setValue] = useState('');
const handleChange = (e) => {
const newValue = e.target.value;
setValue(newValue);
window.dispatchEvent(new CustomEvent('childEvent', { detail: newValue }));
};
return <input value={value} onChange={handleChange} />;
}
