Question

我开始学习react.js，而且我遇到的情况是我无法得到答案。

这是我的组件结构（这只是为了显示层次结构）：

-- ItemContainer
----- ItemList
-------- ItemSingle
----- ItemForm

其中ItemList和ItemForm是兄弟姐妹，ItemContainer的孩子。而ItemSingle是ItemList的一个孩子。

在每个ItemSingle上，我有一个＆＃34;编辑＆＃34;按钮，应该使用其内容更新表单，但我无法从ItemSingle发送到ItemForm.refs。

这就是我尝试过的

ItemSingle组件：

var ItemSingle = React.createClass({
    insertEdit: function(edit_item, e){
        e.preventDefault();
        React.findDOMNode(ItemForm.refs.title).value = edit_item.title;
        React.findDOMNode(ItemForm.refs.content).value = edit_item.content;
    },
    render: function() {
        return (
            <div className="box">
                <div className="box-body bigger-box">
                    <h4>
                        <strong>#{this.props.index + 1}</strong>
                        <span className="title">{this.props.title}</span>
                        <span className="float-right box-option">
                            <a href="#" onClick={this.insertEdit.bind(this, this.props)}>Edit</a>
                        </span>
                    </h4>
                    <div className="text" dangerouslySetInnerHTML={{__html: this.props.content}} />
                </div>
            </div>
        );
    }
});

ItemForm组件：

var ItemForm = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();
        var title = React.findDOMNode(this.refs.title).value.trim();
        var content = React.findDOMNode(this.refs.content).value.trim();

        if(!title || !content){ return false;   }

        this.props.onItemsAdd({title: title, content: content});
        React.findDOMNode(this.refs.title).value = '';
        React.findDOMNode(this.refs.content).value = '';
        $('textarea').trumbowyg('empty');
        return true;
    },
    componentDidMount: function() {
        $('textarea').trumbowyg();
    },
    render: function() {
        return (
            <div className="form-container">
                <form className="form" method="POST">
                    <div className="form-group">
                        <input type="text" className="form-control" ref="title"/>
                    </div>
                    <div className="form-group">
                        <textarea ref="content"></textarea>
                    </div>
                    <div className="form-group">
                        <a className="btn btn-success btn-flat btn-block btn-lg" onClick={this.handleSubmit}><i className="fa fa-save"></i>&nbsp;&nbsp;&nbsp;Save</a>
                    </div>
                </form>
            </div>
        );
    }
});

这是我在ItemSingle第4行上得到的错误：

Uncaught TypeError: Cannot read property 'title' of undefined

Answer 1

React中的Refs不应该像这样使用。

如果您还没有使用React编写多个应用程序，那么您的第一个倾向通常是尝试使用refs来“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常，很明显，“拥有”该状态的适当位置在层次结构中处于更高级别。将状态放置在那里通常会消除使用refs“让事情发生”的任何愿望 - 相反，数据流通常会实现你的目标。

在您的应用中，您需要state，可能在ItemList组件中，并且应该将更改此状态的方法传递给ItemSingle组件。

https://facebook.github.io/react/docs/more-about-refs.html

React.js插入到另一个组件的ref中

1 个答案: