Question

我只想添加一个ref对象，因为我必须清除它的值。我写道：

this.code = (
    <div className="form-group">
          <label className="form-label" htmlFor="target">Target</label>
          <input className="input" onChange={this.handleChange.bind(this)} ref="textbox" id="target" type="text" placeholder="Target" />
        </div>
);
this.setState(this.state);

并收到如下错误：

Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

我想做的只是简单：如果我点击一个按钮，现有表格将被清除，其他表格将会出现。为此，我尝试使用setState方法。这是一种错误的做法吗？

Answer 1

只有ReactOwner可以拥有引用。您可能正在为a添加引用未在组件的render方法中创建的组件，或者你有多个React加载
的副本

根据React Docs：

This usually means one of two things:

1. You are trying to add a ref to an element that is being created outside of a component's render() function.
2. You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured NPM dependency)

您的情况似乎是第一个，您尝试在渲染函数之外创建文档对象。

解决方案是从渲染函数调用一个返回文档对象的函数

renderInput = () => {
    return (
        <div className="form-group">
          <label className="form-label" htmlFor="target">Target</label>
          <input className="input" onChange={this.handleChange.bind(this)} ref={(ref) => this.textbox = ref} id="target" type="text" placeholder="Target" />
        </div>
    )
}
render() {
   return (
       <div>
            {this.renderInputForm()}
      </div>
   )
}

P.S。 React建议对refs使用回调方法而不是字符串引用。检查这个答案：

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

同样是Invalid Refs：

只有ReactOwner可以拥有引用。这通常意味着你正在努力将ref添加到没有所有者的组件（即，是不是在另一个组件的render方法中创建的）。尝试将此组件呈现在新的顶级组件中将举行参考。

无法将ref添加到将由setState重新加载的对象

1 个答案: