Javascript React.js：对象的建模选择

画布上有多个点，单击其中一个应显示一个工具栏，允许编辑选定点的x和y坐标

我试过：

/**
 * @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
);

/**
*@jsx React.DOM
*/
var EditorCanvas=React.createClass({
getInitialState:函数（）{
返回{
要点：[
{
x:50，
y:100
},
{
x:200，
y:50
}
],
所选：空
};
},
render:function（）{
返回
{this.state.points.map（this.renderPoint）}
;
},
renderPoint:函数（点）{
返回
},
选择点：功能（点）{
this.setState（{selected:point}）；
},
renderToolbar:函数（）{
所选变量=this.state.selected；
如果（！已选定）{
返回
}
返回
x:
&米德多；
y:
}
});
var Toolbar=React.createClass({
render:function（）{
var point=this.props.point；
如果（！点）{
返回；
}
返回
x:
&米德多；
y:
;
},
交换：功能（e）{
this.setState（{selected:{x:e.target.value}}）；
},
yChange:函数（e）{
this.setState（{selected:{y:e.target.value}}）；
}
});
var Point=React.createClass({
render:function（）{
变量样式={
左：this.props.x+'px'，
顶部：this.props.y+'px'
};
返回
}
});
React.renderComponent(
,
文件正文
);

它不起作用，因为

state.selected

是点对象的副本，而不是指向它的指针

---

如何使其工作？

您的编辑器Canvas希望其

点

数组在其状态下是真理的来源，但工具栏中的更改并没有使其返回到该数组。工具栏会创建自己的状态，而该状态不会持久化到EditorCanvas。我建议将所有状态保留在EditorCanvas中，并通过回调将更改从工具栏传递到画布

工作区：

var EditorCanvas=React.createClass({
getInitialState:函数（）{
返回{
要点：[
{
x:50，
y:100
},
{
x:200，
y:50
}
],
所选：空
};
},
render:function（）{
返回
{this.state.points.map（this.renderPoint）}
;
},
renderPoint:函数（点）{
返回
},
选择点：功能（点）{
this.setState（{selected:point}）；
},
setSelectedX:功能（事件）{
var point=this.state.selected；
点x=event.target.value；
这个.forceUpdate（）；
},
setSelectedY：功能（事件）{
var point=this.state.selected；
点.y=event.target.value；
这个.forceUpdate（）；
}
});
var Toolbar=React.createClass({
render:function（）{
var point=this.props.point；
如果（！点）{
返回；
}
返回
x:
&米德多；
y:
;
}
});
var Point=React.createClass({
render:function（）{
变量样式={
左：this.props.point.x+'px'，
顶部：this.props.point.y+'px'
};
返回
}
});

您的编辑器或Canvas希望其处于其状态的

点

数组是真相的来源，但工具栏中的更改不会使其返回到该数组。工具栏会创建自己的状态，而该状态不会持久化到EditorCanvas。我建议将所有状态保留在EditorCanvas中，并通过回调将更改从工具栏传递到画布

工作区：

var EditorCanvas=React.createClass({
getInitialState:函数（）{
返回{
要点：[
{
x:50，
y:100
},
{
x:200，
y:50
}
],
所选：空
};
},
render:function（）{
返回
{this.state.points.map（this.renderPoint）}
;
},
renderPoint:函数（点）{
返回
},
选择点：功能（点）{
this.setState（{selected:point}）；
},
setSelectedX:功能（事件）{
var point=this.state.selected；
点x=event.target.value；
这个.forceUpdate（）；
},
setSelectedY：功能（事件）{
var point=this.state.selected；
点.y=event.target.value；
这个.forceUpdate（）；
}
});
var Toolbar=React.createClass({
render:function（）{
var point=this.props.point；
如果（！点）{
返回；
}
返回
x:
&米德多；
y:
;
}
});
var Point=React.createClass({
render:function（）{
变量样式={
左：this.props.point.x+'px'，
顶部：this.props.point.y+'px'
};
返回
}
});

您的编辑器或Canvas希望其处于其状态的

点

数组是真相的来源，但工具栏中的更改不会使其返回到该数组。工具栏会创建自己的状态，而该状态不会持久化到EditorCanvas。我建议将所有状态保留在EditorCanvas中，并通过回调将更改从工具栏传递到画布

工作区：

var EditorCanvas=React.createClass({
getInitialState:函数（）{
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}/>
    }
});