javascript - 在 React 中无法从父级调用客户端方法？

Question

我有一个基本的 React 应用程序，如下所示:

App = createClass({
    update(text){
        this.setState({params: make_params(text)})
    }
    componentWillMount() {
        this.updatePeriodic = _.throttle(this.update, 500)
    }
    render() {
        return <div>
            <SearchField cb={this.updatePeridic}/>
            <ListOfThings searchParams={this.state.params}/>
        </div>;
    }
};

效果很好。我现在尝试添加一个重置按钮:

App = createClass({
    update(text){
        this.setState({params: make_params(text)})
    }
    componentWillMount() {
        this.updatePeriodic = _.throttle(this.update, 500)
    }
    render() {
        search = <SearchField cb={this.updatePeridic}/>
        const reset = () => {
            search.reset()
            this.update("")
        }
        return <div>
            {search}
            <button onClick={reset} />
            <ListOfThings searchParams={this.state.params} />
        </div>;
    }
};

除了当我尝试调用 search.reset 时遇到错误，表示该函数不存在。我不太确定还能做什么——我知道让 parent 调用 child 的 setState 有点粗俗，但我没有看到任何其他方法来实现这一点；我不想这样做:

<SearchField value={this.state.text} cb={this.setState({text: ""})}/>

因为，A) 每次有人在该字段中键入内容时，都会导致整个应用程序重新呈现，B) 当原始文本是应用程序状态的一部分时，没有明显的方法来限制 params更新子 ListOfThings。想法？

Answer 1

您不能从父级调用子方法。
你可以做什么:

• 将参数放入父状态，
• 将其作为 Prop 传递给 child ，
• 让子进程响应重置参数。

类似这样的事情:

update(text, shouldResetChild){
  this.setState({
    params: make_params(text), 
    shouldResetChild: shouldResetChild        // store action to reset child
  })
}

在你的渲染中:

search = <SearchField 
            cb={this.updatePeridic}
            shouldReset = {this.state.shouldResetChild} />    // pass to child
const reset = () => {
  this.update("", true)
}

在你的 child 的某个地方(哪种生命周期方法取决于 reset() 的作用)。

if (this.props.shouldReset) {
  this.reset()
}

PS:在父级内部的任何其他 setState() 调用中(在您的示例中没有)，您应该包含 { shouldResetChild : false } 来重置state 中的参数，以确保重置仅发生一次/仅在单击重置按钮时发生。