javascript - 通过组件向ReactJs函数发送数据

Question

我想让嵌套组件可点击，并知道点击了哪个组件。

我曾尝试发送变量，但存在一些问题。

如果我使用 this.clickMe() 编写函数，它将在组件加载时调用。如果函数是这样写的 this.clickMe 不带圆括号，那么点击事件会被调用，但我无法传递参数。

import React, { Component } from 'react';
import CategoryControlRow from './components/CategoryControlRow';
import './style.css';

/**
 * @class ./widgets/SeatMap/components/LeafletMap/components/CategoryControl
 */
class CategoryControl extends Component
{
    /**
     * TODO: This function supposed to be deleted.
     */
    clickMe = (text) =>
    {
        alert(text);
    };

    /**
     * @returns {XML}
     */
    render()
    {
        return (
            <div className="col-xs-12 col-md-3" id="categories">
                <p className="text-uppercase" id="filter">Ansicht Filtern</p>

                <CategoryControlRow class={'category purple'} clickMe={this.clickMe} categoryName={'1. Kategorie'} currency={'CHF'} value={"78.00"} />
                <CategoryControlRow class={'category orange'} clickMe={this.clickMe} categoryName={'2. Kategorie '} currency={'CHF'} value={"68.00"} />
                <CategoryControlRow class={'category green'} clickMe={this.clickMe} categoryName={'3. Kategorie'} currency={'CHF'} value={"58.00"} />
                <CategoryControlRow class={'category blue'} clickMe={this.clickMe} categoryName={'4. Kategorie'} currency={'CHF'} value={"48.00"} />

            </div>
        )
    }
}

export default CategoryControl;

子组件

import React, { Component } from 'react';
import './style.css';

/**
 * @class ./widgets/SeatMap/components/LeafletMap/components/CategoryControl/components/CategoryControlRow
 */
class CategoryControlRow extends Component
{
    /**
     * @returns {XML}
     */
    render() {
        return (
            <p className={"category " + this.props.class} onClick={this.props.clickMe}>
                {this.props.categoryName}
                <span>
                    {this.props.currency} {this.props.value}
                </span>
            </p>
        )
    }
}

export default CategoryControlRow;

Answer 1

这样写

<CategoryControlRow class={'category purple'} clickMe={(event) => this.clickMe(event, "value1", "value2")} categoryName={'1. Kategorie'} currency={'CHF'} value={"78.00"} />

您可以传递任意数量的参数，而不是 value1 和 value2