javascript - 获取 child 中的 onClick 按钮事件

Question

我有一个类似的 react 组件:

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 中映射到几个称为 tube 的圆形组件:

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 事件传递给子级，以便他们可以对该事件使用react？

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

更深入地了解这里发生的事情，我使用数组作为数据存储机制，然后将其作为 Prop 传递给子级以渲染圆圈。我需要找到正确的方法，将子组件的子组件绑定(bind)到呈现它的数组元素，或者让按钮单击能够直接操作呈现它的数组部分。

预先感谢您对此提供的任何帮助。

Answer 1

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

因此，您可以在 onClick 事件上将计数器/位置传递给组件，或者也可以直接传递给组件 JS events