Question

我正在使用react-rails gem。在我的组件中，我有两个输入字段，每个字段都有一个ref。但是，控制台抛出以下错误：

未捕获错误：addComponentAsRefTo（...）：只有ReactOwner可以拥有裁判。您可能正在向未创建的组件添加引用在组件的render方法中，或者您有多个副本反应已加载

Facebook的文档无济于事。

_new_item.js.jsx

var NewItem = React.createClass({
    handleClick() {
        var name = this.refs.name.value;
        var description = this.refs.description.value;

       console.log('The name value is ' + name + 'the description value is ' + description);

    },

    render() {
        return (
            <div>
                <input ref='name' placeholder='Enter the name of the item' />
                <input ref='description' placeholder='Enter a description' />
                <button onClick={this.handleClick}>Submit</button>
            </div>
        );
    } 
});

_body.js.jsx

var Body = React.createClass({
    render() {
        return (
            <div>
                <NewItem />
                <AllItems />
            </div>
        );
    } 
});

_main.js.jsx

var Main = React.createClass({
    render() {
        return (
            <div>
                <Header />
                <Body />
            </div>
        );
    }
});

我真的不知道错误在哪里。

Answer 1

您最好使用函数refs而不是命名refs：

所以而不是

<input ref='name' />

您可以使用：

<input ref={node => this.nameElement = node} />

然后而不是：

this.refs.name

使用

this.nameElement

我相信它会解决你的问题。

Rails / React：Refs必须拥有所有者

1 个答案: