Question

我的反应成分类似于：

let TabComponent = React.createClass({
    getInitialState : function() {
        return {
            tubesArray: [ ],
            rows: 10,
            tubesPerrow: 10,
        };

    },

    render: function() {

        return (
            <div className={styles.drawingWrapper}>
                <button className={styles.tabButton}>
                    Up
                </button>
                <Drawing ref="drawing" tubesArray = {this.state.tubesArray} deleteTube={this.deleteTube}/>
            </div>
        );
    }
});

它的子组件将数组置于状态并将其映射到svg中，并将其映射到称为管的几个圆组件：

let Drawing = React.createClass({

    renderTubes: function() {
        let deleteTube = this.props.deleteTube;
        return this.props.tubesArray.map((row) => {
            return row.map((tube) => {
                return <DrawingTube key={tube.id} row={row} tube={tube} delete={deleteTube}/>;
            });
        });
    },

    render: function() {
        return (
            <div className={styles.drawing} style={{"border":"1px solid black"}}>
                <svg onMouseUp={this.handleMouseUp} onMouseMove={this.handleMouseMove} onMouseDown={this.handleMouseDown}
                     ref="svg" className={styles.svg} viewBox="0 0 480 300" preserveAspectRatio="xMidYMid meet">
                    {this.renderTubes()}
                </svg>
            </div>
        );
    }
});

然后，绘图管组件是多个圆圈，其自身状态为已选择或未选中：

let DrawingTube = React.createClass({

    getInitialState : function() {
        return {
            filled: false
        };
    },

    fillSVG: function(event){
        if(this.state.filled){
            this.setState({filled: false});
        }
        else{
            this.setState({filled: true});
        }
    },

    render: function() {
        return (
            <circle cx={this.props.tube.xPos}
                    cy={this.props.tube.yPos}
                    r={this.props.tube.diameter/2}
                    stroke="black"
                    strokeWidth="1"
                    fill={this.state.filled ? 'black' : 'purple'}
                    onClick={this.fillSVG}
                    onMouseDown={this.handleMouseDown}
            />
        );
    }
});

我的问题是如何在“父母的父母”（TabComponent）中获取向上按钮点击事件，以减少孩子孩子中圆圈的y位置？或者更一般地说，如何将onClick事件传递给子节点，以便它们可以对事件做出反应？

我发现了很多关于如何通过将回调传递给子组件来“看到”来自父级子项的事件的信息，但是我的Google搜索没有发现任何关于如何“看到”事件中发生的事件的信息。父组件。

在这里发生的事情的哲学中，我还使用了一个数组存储机制，然后将其作为道具传递给孩子来渲染圆圈。我需要找到一个正确的方法，让孩子的子组件绑定到渲染它的数组元素，或者单击按钮以便能够直接操作渲染它的数组片段。

提前感谢您提供任何帮助。

Answer 1

您无法将事件从父级传递给子级，您只能设置属性。

因此，您可以将计数器/位置传递给<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" />事件中的组件，也可以将旧版JS events传递给<{3}}

Answer 2

您最好的选择可能是将您希望从Y位置减去的值作为<Drawing />的道具，然后再传递给<DrawingTube />。

在孩子中获取onClick按钮事件

2 个答案: