1

I'm starting to learn react.js, and I've face a situation that I can't get an answer.

This is my components structure(this is just to show hierarchy):

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

Where ItemList and ItemForm are siblings, chilren of ItemContainer. And ItemSingle is a child from ItemList.

On each ItemSingle I have a "edit" button, that should update the form with its content, but I'm not able to send from ItemSingle to ItemForm.refs.

This is what I've tried

ItemSingle Component:

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 Component:

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

And this is the error I got on ItemSingle line number 4:

Uncaught TypeError: Cannot read property 'title' of undefined
4

1 回答 1

2

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

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

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

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

于 2015-09-16T17:52:46.357 回答