reactjs - 如何从 Mobiscroll 子组件中获取 ref 到父组件中
问题描述
我试图让孩子的状态进入父母。将 Child 的状态和方法移入父级后,我得到以下内容:
export default class Parent extends React.Component {
constructor() {
super();
this.state = { mpc_steps: { price: 0, credits: 0, text: "MPC Credits" } }
}
setMPCSteps = () => {
let step = this.refs.mpc_slider.instance.getVal(); // Will fail
this.setState({
mpc_steps: {
price: step * 200,
credits: step,
text: "MPC Credits"
}
});
};
render() {
return(
<div>
<Child getCredits={this.setMPCSteps} getParentState={this.state.mpc_steps}/>
)
}
}
子组件:
export default class Child extends React.Component {
render() {
return (
<Fragment>
<mobiscroll.Slider
ref="mpc_slider"
value={this.props.getParentState}
onChange={this.props.getCredits}
>
Buy Credits @ $2/Credit
</mobiscroll.Slider>
</Fragment>
)
}
}
我需要以某种方式从父母那里调用 Child 的 ref 值。问题是 mobiscroll ref 不是从父级定义的。有没有一种简单的方法可以做到这一点?欢迎任何提示。
解决方案
您可以使用React.forwardRef
api:
子组件:
class Child extends React.Component {
render() {
return (
<Fragment>
<mobiscroll.Slider
ref={this.props.innerRef}
value={this.props.getParentState}
onChange={this.props.getCredits}
>
Buy Credits @ $2/Credit
</mobiscroll.Slider>
</Fragment>
)
}
}
export default React.forwardRef((props, ref) => <Child innerRef={ref} {...props}/>);
并像这样使用它:
<Child ref="mpc_slider" />
推荐阅读
- database - 无法在 SQL Server Management Studio 的 SQLite 数据库(.db 文件)中运行 JSON_VALUE
- python - 加载 Keras 模型并使用它进行预测
- excel - 使用 VBA 从 Excel 格式化电子邮件正文
- r - rbind.fill 基于通用模式 R
- outlook - 如何将 Azure Devops 日历集成到 Outlook
- c# - 使用 IIS 托管服务的问题 - 本地和远程
- python - Manjaro 上的旧版 Python (Arch Linux)
- regex - 我可以在单个正则表达式字符串中使用正则表达式提取值吗
- nebula-graph - 遇到错误:使用 Nebula Graph 数据库查询时获取邻居失败
- ios - 无法在 iOS 应用上使用 IPv6 从 RTMP HLS 服务器观看直播