1

私は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
4

1 に答える 1

2

React の Ref は、このように使用するためのものではありません。

React でいくつかのアプリをプログラミングしたことがない場合、通常、アプリで「物事を実現する」ために ref を使用しようとする最初の傾向があります。このような場合は、コンポーネント階層のどこに状態を所有する必要があるかについて、少し時間をとってより批判的に考えてください。多くの場合、その状態を「所有」する適切な場所は、階層の上位レベルにあることが明らかになります。そこに状態を配置すると、多くの場合、参照を使用して「物事を実現する」という欲求がなくなります。代わりに、通常はデータフローが目的を達成します。

アプリではstate、おそらくItemListコンポーネントで が必要になり、この状態を変更するメソッドをコンポーネントに渡す必要がありItemSingleます。

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

于 2015-09-16T17:52:46.357 に答える