javascript - React.js : Modeling selection of objects

Question

Canvas 上有多个点，单击其中一个会显示一个工具栏，允许编辑所选点的x和y坐标。

<强> JSFiddle

我尝试过:

/**
 * @jsx React.DOM
 */
var EditorCanvas = React.createClass({
    getInitialState: function() {
        return {
            points: [
                {
                    x: 50,
                    y: 100
                },
                {
                    x: 200,
                    y: 50
                }
            ],
            selected: null
        };
    },

    render: function() {
        return <div>
            <Toolbar point={this.state.selected}/>
            <div id="canvas">
                {this.state.points.map(this.renderPoint)}
            </div>
        </div>;
    },

    renderPoint: function(point) {
        return <Point x={point.x} y={point.y} onClick={this.selectPoint.bind(this, point)}/>
    },

    selectPoint: function(point) {
        this.setState({selected: point});
    },

    renderToolbar: function() {
        var selected = this.state.selected;
        if (!selected) {
            return <div/>
        }
        return <div>
            x:<input type="number" value={selected.x} onInput={this.xChange}/>
            &middot;
            y:<input type="number" value={selected.y} onInput={this.yChange}/>
        </div>
    }
});

var Toolbar = React.createClass({
    render: function() {
        var point = this.props.point;
        if (!point) {
            return <div id="toolbar"/>;
        }
        return <div id="toolbar">
            x:<input type="number" value={point.x} onInput={this.xChange}/>
            &middot;
            y:<input type="number" value={point.y} onInput={this.yChange}/>
        </div>;
    },

    xChange: function(e) {
        this.setState({selected: {x: e.target.value}});
    },
    yChange: function(e) {
        this.setState({selected: {y: e.target.value}});
    }
});


var Point = React.createClass({
    render: function() {
        var style = {
            left: this.props.x + 'px',
             top: this.props.y + 'px'
        };
        return <div style={style} className="point" onClick={this.props.onClick}/>
    }
});

React.renderComponent(
    <EditorCanvas/>,
    document.body
);

它不起作用，因为 state.selected 是点对象的副本，而不是指向它的指针。

我怎样才能让它发挥作用？

Answer 1

您的 EditorCanvas 期望其状态下的 points 数组成为事实来源，但工具栏中的更改不会使其返回到该数组。工具栏创建自己的状态，该状态不会保留到 EditorCanvas。我建议将所有状态保留在 EditorCanvas 中，并通过回调将更改从工具栏传递到 Canvas 。

工作中的 JSFiddle: http://jsfiddle.net/krza5/2/

var EditorCanvas = React.createClass({
    getInitialState: function() {
        return {
            points: [
                {
                    x: 50,
                    y: 100
                },
                {
                    x: 200,
                    y: 50
                }
            ],
            selected: null
        };
    },

    render: function() {
        return <div>
            <Toolbar point={this.state.selected}
                onXChange={this.setSelectedX}
                onYChange={this.setSelectedY}/>
            <div id="canvas">
                {this.state.points.map(this.renderPoint)}
            </div>
        </div>;
    },

    renderPoint: function(point) {
        return <Point point={point} onClick={this.selectPoint.bind(this, point)}/>
    },

    selectPoint: function(point) {
        this.setState({selected: point});
    },

    setSelectedX: function(event) {
        var point = this.state.selected;
        point.x = event.target.value;
        this.forceUpdate();
    },

    setSelectedY: function(event) {
        var point = this.state.selected;
        point.y = event.target.value;
        this.forceUpdate();
    }
});

var Toolbar = React.createClass({
    render: function() {
        var point = this.props.point;
        if (!point) {
            return <div id="toolbar"/>;
        }
        return <div id="toolbar">
            x:<input type="number" value={point.x} onInput={this.props.onXChange}/>
            &middot;
            y:<input type="number" value={point.y} onInput={this.props.onYChange}/>
        </div>;
    }
});

var Point = React.createClass({
    render: function() {
        var style = {
            left: this.props.point.x + 'px',
             top: this.props.point.y + 'px'
        };
        return <div style={style} className="point" onClick={this.props.onClick}/>
    }
});