Javascript 通过组件将数据发送到ReactJs函数_Javascript_Reactjs_Components

Javascript 通过组件将数据发送到ReactJs函数

javascript reactjs

Javascript 通过组件将数据发送到ReactJs函数,javascript,reactjs,components,Javascript,Reactjs,Components,我想使嵌套组件可单击，并知道在哪个组件上单击我曾尝试发送变量，但存在一些问题如果我使用编写函数，则单击我（），它将在组件加载时被调用。如果函数是以这种方式编写的this.clickMe没有圆括号，则会调用click事件，但我无法传递参数 import React, { Component } from 'react'; import CategoryControlRow from './components/CategoryControlRow'; import './style.css'

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

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

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

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}来自'React'；
从“./components/CategoryControlRow”导入CategoryControlRow；
导入“/style.css”；
/**
*@class./widgets/SeatMap/components/传单地图/components/CategoryControl
*/
类CategoryControl扩展了组件
{
/**
*TODO:应该删除此函数。
*/
单击我=（文本）=>
{
警报（文本）；
};
/**
*@returns{XML}
*/
render（）
{
返回(
Ansicht Filtern
)
}
}
导出默认类别控件；

子组件

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;

import React，{Component}来自'React'；
导入“/style.css”；
/**
*@class./widgets/SeatMap/components/传单地图/components/CategoryControl/components/CategoryControlRow
*/
类CategoryControlRow扩展组件
{
/**
*@returns{XML}
*/
render（）{
返回(

{this.props.categoryName}
{this.props.currency}{this.props.value}

)
}
}
导出默认类别控件行；

这样写

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

this.clickMe（事件，“value1”，“value2”）}类别名称={'1.Kategorie'}货币={'CHF'}值={“78.00”}/>

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

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

this.clickMe（事件，“value1”，“value2”）}类别名称={'1.Kategorie'}货币={'CHF'}值={“78.00”}/>

您可以在

类别控件行中传递任意数量的参数，而不是value1和value2，您可以执行以下操作：

创建一个构造函数，在其中执行this.onClick=this.onClick.bind（this）
，使其保留对正确“this”的引用
创建一个函数onClick（）{this.props.onClick（this.props.categoryName）；}
或任何要用于标识组件的数据
在你的p上设置onClick={this.onClick}

编辑：您可以使用onClick的箭头函数来避免绑定（this）

技巧，但在许多情况下这会带来一点性能成本，因此我更喜欢绑定版本。

在您的

类别控件行中，您可以执行以下操作：
<CategoryControlRow class={'classname'} clickMe={(event) => this.clickMe(event, parameterlist)} categoryName={categoryobject} currency={currencyobj} value={valueobject} />


创建一个构造函数，在其中执行this.onClick=this.onClick.bind（this）
，使其保留对正确“this”的引用
创建一个函数onClick（）{this.props.onClick（this.props.categoryName）；}
或任何要用于标识组件的数据
在你的p上设置onClick={this.onClick}

编辑：您可以使用onClick的箭头函数来避免绑定（this）

技巧，但在许多情况下这会有一点性能开销，所以我更喜欢绑定版本。

this.clickMe（event，parameterlist）}categoryName={categoryobject}currency={currencyobj}value={valueobject}/>
<CategoryControlRow class={'classname'} clickMe={(event) => this.clickMe(event, parameterlist)} categoryName={categoryobject} currency={currencyobj} value={valueobject} />

子组件中作为道具的每件东西：

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.YOUR_FIELD_NAME}
                <span>
                    {this.props.currency.YOUR_FIELD_NAME} {this.props.value.YOUR_FIELD_NAME}
                </span>
            </p>
        )
    }
}

export default CategoryControlRow;

import React，{Component}来自'React'；
导入“/style.css”；
/**
*@class./widgets/SeatMap/components/传单地图/components/CategoryControl/components/CategoryControlRow
*/
类CategoryControlRow扩展组件
{
/**
*@returns{XML}
*/
render（）{
返回(

{this.props.categoryName.YOUR_FIELD_NAME}
{this.props.currency.YOUR_FIELD_NAME}{this.props.value.YOUR_FIELD_NAME}

)
}
}
导出默认类别控件行；

this.clickMe（事件，参数列表）}categoryName={categoryobject}currency={currencyobj}value={valueobject}/>

子组件中作为道具的每件东西：

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.YOUR_FIELD_NAME}
                <span>
                    {this.props.currency.YOUR_FIELD_NAME} {this.props.value.YOUR_FIELD_NAME}
                </span>
            </p>
        )
    }
}

export default CategoryControlRow;

import React，{Component}来自'React'；
导入“/style.css”；
/**
*@class./widgets/SeatMap/components/传单地图/components/CategoryControl/components/CategoryControlRow
*/
类CategoryControlRow扩展组件
{
/**
*@returns{XML}
*/
render（）{
返回(

{this.props.categoryName.YOUR_FIELD_NAME}
{this.props.currency.YOUR_FIELD_NAME}{this.props.value.YOUR_FIELD_NAME}

)
}
}
导出默认类别控件行；

方法：

clickMe = (e) =>{
    alert(e.target.whateverYouNeed);
}

要素：

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

this.clickMe（e）}categoryName={'1.Kategorie'}currency={'CHF'}value={'78.00}/>

方法：

clickMe = (e) =>{
    alert(e.target.whateverYouNeed);
}

要素：

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

this.clickMe（e）}categoryName={'1.Kategorie'}currency={'CHF'}value={'78.00}/>

对于

类别控制

组件，在下面添加构造函数，如下所示：

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;

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;

对于

CategoryControl

组件，在下面添加构造函数，如下所示：

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;

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;