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

我开始学习react.js，我面临着一种无法得到答案的情况

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

如果ItemList和ItemForm是同级，则为ItemContainer的子级。ItemSingle是ItemList中的子项

在每个ItemSingle上，我都有一个“编辑”按钮，可以用它的内容更新表单，但是我无法从ItemSingle发送到ItemForm.refs

这就是我尝试过的

项目单个组件：

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>
        );
    }
});

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>
        );
    }
});

---

React中的REF不是这样使用的

如果您还没有使用React编程多个应用程序，那么您的第一个倾向通常是尝试使用REF在应用程序中“使事情发生”。如果是这种情况，请花一点时间，更批判性地思考在组件层次结构中应该在哪里拥有状态。通常情况下，很明显，“拥有”该州的合适位置是在层级中的更高级别。将状态放在那里通常会消除使用ref“使事情发生”的任何愿望，相反，数据流通常会实现您的目标

在应用程序中，您需要

状态

，可能在

项目列表

组件中，更改此状态的方法应传递给

项目单一

组件

---

你提到的“状态”是什么，我在理解这个概念时遇到了一些困难。谢谢你的回答。（顺便说一句，nice React使用单向数据流概念，

props

是所有组件使用的不可变数据，

state

是用户在应用程序中创建的数据表示。理解

状态

和

道具

对学习反应至关重要。请遵循教程，它帮助我理解了一些React的基础知识。这就是我开始学习的地方，我学到了一些基础知识，我想这还不足以理解这个概念。谢谢你的帮助，我会花更多的时间阅读，并努力做到这一点。

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>
        );
    }
});

Uncaught TypeError: Cannot read property 'title' of undefined