通过组件将数据发送到ReactJs函数 [英] Send data to ReactJs function via component

问题描述

我想使嵌套组件可点击，并知道在哪个组件上单击。

I want to make nested component clickable and to know on which component is clicked.

我试图发送变量，但是存在一些问题。

I had tried to send variable but there are some issues.

如果我用 this.clickMe（） 编写函数，则它将在组件加载时被调用。
如果函数以这种方式编写 this.clickMe 而没有圆括号，则会调用click事件，但是我无法传递

If I write function with this.clickMe() it will be invoked at component load. if the function is written in this way this.clickMe without rounded brackets, the click event is invoked but I can not pass a parameter.

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;

推荐答案

对于 CategoryControl 组件，在下面添加构造函数；

For CategoryControl component, add constructor below as following;

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

class CategoryControl extends Component
{
    // Add this constructor
    constructor(props) {
        super(props);
        this.clickMe = this.clickMe.bind(this);
    }

    clickMe = (text) =>
    {
        alert(text);
    };

    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;

对于 CategoryControlRow 子组件，添加构造函数，事件处理函数，并在 p 元素中编辑onClick属性，如下所示；

And for the CategoryControlRow sub component, add constructor, event handler function and edit your onClick attribute in p element as following;

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

class CategoryControlRow extends Component
{
    // Add this constructor
    constructor(props) {
        super(props);
    }

    // Add this event handler function
    onClickParagraph = categoryName => {
        this.props.clickMe(categoryName);
    };

    render() {
        return (
            <p className={"category " + this.props.class} 
               /* Edit onClick like this*/ 
               onClick={this.onClickParagraph.bind(this, this.props.class)}>
                  {this.props.categoryName.YOUR_FIELD_NAME}
                  <span>
                      {this.props.currency.YOUR_FIELD_NAME} 
                      {this.props.value.YOUR_FIELD_NAME}
                  </span>
            </p>
        )
    }
}

export default CategoryControlRow;

这篇关于通过组件将数据发送到ReactJs函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！