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

React.js insert into ref of another component

本文关键字:ref 组件 另一个 js 插入 React      更新时间:2023-09-26

我刚开始学习react.js,遇到了找不到答案的情况。

这是我的组件结构(这只是为了显示层次结构):

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

其中ItemList和ItemForm是ItemContainer的兄弟姊妹。ItemSingle是ItemList的子元素。

在每个ItemSingle我有一个"编辑"按钮,应该更新其内容的形式,但我不能从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

React中的ref不是这样使用的。

如果你没有用React编写过几个应用程序,你的第一倾向通常是尝试在你的应用程序中使用refs来"让事情发生"。如果是这种情况,花点时间更批判性地思考一下state应该在组件层次结构中拥有的位置。通常,很明显,"拥有"该状态的适当位置是在层次结构中的更高级别。将状态放置在那里通常会消除使用引用来"使事情发生"的任何愿望-相反,数据流通常会完成您的目标。

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

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