Javascript 不带ref的react组件的目标dom元素

我在项目中安装了一个名为react Geosugest的react组件。我需要在

组件中找到

dom元素，并将

onClick

处理程序插入

。是否有一种方法可以在不改变

组件代码的情况下针对

标记

这是JSX

render() {
return (
<div>
  <Geosuggest
    id = "searchbar"
    label = " "
    placeholder = ""
    initialValue = {this.state.location}
    onChange = {this.onInputChange}
    onSuggestSelect = {this.onSelection}
    onClick = {this.toggleSearch}
    className = {this.state.expand}
    inputClassName = {this.state.expand}
    // Name a calling reference
    ref = 'geosuggest_component'
  />
</div>
);

render（）{
返回(
);

}

这是HTML输出

<div class="geosuggest">
<div class="geosuggest__input-wrapper">
<label for="searchbar"></label>
<input class="geosuggest__input" type="text" id="searchbar">
</div>
</div>

---

您必须使用vanillajs。在组件中，您可以访问componentDidMount中的geosuggest_组件参考：

componentDidMount() {
    // findDOMNode returns an HTMLElement
    const node = ReactDOM.findDOMNode(this.refs.geosuggest_component);
    // Then search the label
    const label = node.querySelector('label');
    // Now, you can do anything you want with label
    label.addEventListener('click', () => console.log('clicked'))   
}

const node = ReactDOM.findDOMNode(this.geosuggest_component);

我使用ReactDOM.findDOMNode是因为在本例中，this.refs.geosugest_组件返回一个React组件。 findDOMNode方法将为您提供所需的HTMLElement

但是，声明ref的更好方法是使用回调：

ref={node => this.geosuggest_component = node}

现在在componentDidMount中：

componentDidMount() {
    // findDOMNode returns an HTMLElement
    const node = ReactDOM.findDOMNode(this.refs.geosuggest_component);
    // Then search the label
    const label = node.querySelector('label');
    // Now, you can do anything you want with label
    label.addEventListener('click', () => console.log('clicked'))   
}

const node = ReactDOM.findDOMNode(this.geosuggest_component);