我有两个组成部分:
父组件
子组件
我试图从Parent调用Child的方法,我尝试了这种方式,但不能得到一个结果:
class Parent extends Component {
render() {
return (
<Child>
<button onClick={Child.getAlert()}>Click</button>
</Child>
);
}
}
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
是否有一种方法从父调用子方法?
注意:子组件和父组件在两个不同的文件中。
这里有个虫子?注意:
我同意rossipedia的解决方案使用forwardRef, useRef, useImperativeHandle
网上有一些错误的信息说refs只能从React类组件创建,但如果你使用上面提到的钩子,你确实可以使用函数组件。注意,只有在我将文件更改为在导出组件时不使用withRouter()后,钩子才对我有效。例如,从
export default withRouter(TableConfig);
取而代之的是
export default TableConfig;
In hindsight the withRouter() is not needed for such a component anyway, but usually it doesn't hurt anything having it in. My use case is that I created a component to create a Table to handle the viewing and editing of config values, and I wanted to be able to tell this Child component to reset it's state values whenever the Parent form's Reset button was hit. UseRef() wouldn't properly get the ref or ref.current (kept on getting null) until I removed withRouter() from the file containing my child component TableConfig
我们很高兴有一个自定义钩子,我们称之为useCounterKey。它只是设置了一个反键,或者一个从0开始计数的键。它返回的函数将重置键(即增量)。(我相信这是React中最常用的重置组件的方法-只需撞击键。)
然而,这个钩子也适用于任何情况下,你想发送一个一次性的消息给客户端做某事。例如,我们用它来聚焦子控件中的某个父事件——它只是在键更新时自动聚焦。(如果需要更多道具,它们可以在重置按键之前设置,以便在事件发生时可用。)
这个方法有一点学习曲线b/c,它不像典型的事件处理程序那么直接,但它似乎是我们在React中发现的最习惯的处理方法(因为键已经以这种方式起作用)。Def开放对这种方法的反馈,但它是工作得很好!
// Main helper hook:
export function useCounterKey() {
const [key, setKey] = useState(0);
return [key, () => setKey(prev => prev + 1)] as const;
}
示例用法:
// Sample 1 - normal React, just reset a control by changing Key on demand
function Sample1() {
const [inputLineCounterKey, resetInputLine] = useCounterKey();
return <>
<InputLine key={inputLineCounterKey} />
<button onClick={() => resetInputLine()} />
<>;
}
// Second sample - anytime the counterKey is incremented, child calls focus() on the input
function Sample2() {
const [amountFocusCounterKey, focusAmountInput] = useCounterKey();
// ... call focusAmountInput in some hook or event handler as needed
return <WorkoutAmountInput focusCounterKey={amountFocusCounterKey} />
}
function WorkoutAmountInput(props) {
useEffect(() => {
if (counterKey > 0) {
// Don't focus initially
focusAmount();
}
}, [counterKey]);
// ...
}
(counterKey的概念要归功于Kent Dodds。)
你可以在这里使用另一个模式:
class Parent extends Component {
render() {
return (
<div>
<Child setClick={click => this.clickChild = click}/>
<button onClick={() => this.clickChild()}>Click</button>
</div>
);
}
}
class Child extends Component {
constructor(props) {
super(props);
this.getAlert = this.getAlert.bind(this);
}
componentDidMount() {
this.props.setClick(this.getAlert);
}
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
它所做的是在挂载子节点时设置父节点的clickChild方法。这样,当你点击parent中的按钮时,它会调用clickChild,它会调用child的getAlert。
如果你的子文件是用connect()包装的,那么你就不需要getWrappedInstance()了。
注意你不能使用onClick={this。在父元素中使用clickChild},因为当父元素被渲染时,子元素不会被挂载,所以这个。clickChild还没有被分配。使用onClick={() => this. clickchild()}是好的,因为当你点击按钮this. clickchild()}。clickChild应该已经被分配了。