Question

我有一个基本的React App，看起来像这样：

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时遇到错误，说该函数不存在。我不确定还能做什么 - 我知道让父母给他们孩子的setState打电话是件好事，但我没有看到任何其他方法来实现这一点;我不想这样做：

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

因为，A）每当有人在该字段中键入时将导致重新呈现WHOLE APP，并且B）当原始文本是App状态的一部分时，没有明显的方法来限制{{1}更新子ListOfThings。想法？

Answer 1

您无法从父母处调用子方法你能做什么：

将参数设置为父状态
将其作为道具传给孩子，
让孩子回复重置参数。

这样的事情：

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)
}

在你孩子的某个地方（生命周期方法取决于reset()的作用）。

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

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

无法从React中的父级调用客户端方法？

1 个答案: