反應組件不公開方法

我正在使用ref組件來強制性地從其父項的過濾器窗體上觸發重置。反應組件不公開方法

在同一組件有：

handleFilterReset() { 
    // this.filterForm is defined but reset() isn't exposed 
    // see console.log(this.filterForm) output below 
    this.filterForm.reset() 
} 

render() { 
    return (
    <FilterBox onReset={::this.handleFilterReset}> 
     <FilterForm ref={(ref) => { this.filterForm = ref }} /> 
    </FilterBox> 
) 
}

而且在FilterForm我們：

class FilterForm extends React.Component { 
    reset() { 
    // this is not being called 
    } 
}

的console.log輸出：

ProxyComponent {props: Object, context: Object, refs: Object, updater: Object, _reactInternalInstance: ReactCompositeComponentWrapper…}

在我看來，這一切都是根據official docs完成。不過，我得到以下錯誤：

Uncaught TypeError: this.filterForm.reset is not a function

at SalesChannelsList.handleFilterReset

感謝

來源

2017-05-04 Thibaut

非常基本的建議Thibaut可能是一個React版本的東西，但根據提供的文檔，它應該是'class FilterForm extends React.Component' - 你缺少'React.'。 – Gorbles

@Gorbles，也許他已經忘了寫在帖子中，但是如果你從'react'進口像'import React，{Component}，你可以這樣做 –

你正在使用'::'進行綁定，你可以嘗試使用'handleFilterReset =（）=> {'並調用像'' –

找到了！這是React Intl的「因爲」。

1）使用injectIntl時，使用設置爲true的withRef選項：

injectIntl(SalesChannelsFilterForm, { withRef: true })

2）在你的組件的裁判回調，你可以用下面的代碼

ref={(ref) => this.filterForm = ref.refs.wrappedInstance}

訪問您的實例但是，這將會崩潰，因爲ref（）回調在render（）期間被調用了兩次，第一次是null值。所以你應該首先驗證它已被定義。我的完整的解決方案：

在render（）方法，在組件上：

ref={::this.setFilterFormRef}

然後處理程序：

setFilterFormRef(ref) { 
    if (ref && ref.refs) { 
    this.filterForm = ref.refs.wrappedInstance 
    } 
}

享受！

來源

2017-05-09 06:58:04 Thibaut

我會用REF =「refName」，而不是具有如下功能（這又是創建的每個渲染），然後通過this.refs訪問它。

不管怎麼說，這是一個工作示例：

https://www.webpackbin.com/bins/-KjHtMcw3LcVEycggzWU

來源

2017-05-04 10:01:08 jony89

Thx @ jony89。這是我最初的解決方案，它既不起作用。 BTW使用字符串refs現在已被棄用（請參閱官方文檔：https：//facebook.github.io/react/docs/refs-and-the-dom.html）。 – Thibaut

所以請提供您的完整代碼，使其應該工作。 – jony89

確定進一步調試後，我可以獲得以下見解：ref不是常規組件實例，而是ProxyComponent（就像初始問題的console.log中所指出的那樣）。這是因爲正在被ref'ed的組件實際上是從基類中獲得的：getFilterForm（）{return SalesChannelsFilterForm}。但是，即使使用return ，我也找不到可行的解決方案。 – Thibaut

反應組件不公開方法

回答

相關問題