Javascript 如何将单击事件传递给子组件

我在下拉列表中有两个react引导按钮，我正在试图理解onClick事件不起作用的原因。按钮从功能返回。如果我只使用主渲染函数中的按钮，就可以触发事件。我想知道为什么会这样。从函数返回组件是否正常？或者我需要使用一个类

代码：

{this.state.filterDropdowns.map（（值，索引号）=>
{value.name}
{value.data.result.map（（输入，索引）=>
点击过滤器盒（e，索引号）}
>
{“+”输入}


)}
这个.onClear（e）}
onSelect={（e）=>this.onSelect（e）}
>
)}

自定义按钮功能

const CustomButtons = function(props) {
      if (props.length < 10) {
        return(<div></div>);
      } else {
        return (
          <div >
            <div className="select-div">
              <Button 
                size="sm"
                onClick={props.onSelect}
                >
                Select
              </Button>
            </div>
            <div className="clear-div">
              <Button 
                size="sm"
                onClick={props.onClear}
                >
                Clear
              </Button>
            </div>
          </div>
          );
      } 
    }

const CustomButtons=功能（道具）{
如果（支柱长度<10）{
return（）；
}否则{
返回(
挑选
清楚的
);
} 
}

您需要按如下方式更改实现：

<CustomButtons 
  length={value.data.result.length} 
  index={indexNo}
  onClear={this.onClear.bind(this)} 
  onSelect={this.onSelect.bind(this)}
/>

然后在函数中按如下方式实现：

<Button 
  size="sm"
  onClick={(e) => props.onSelect(e)}
>
  Select
</Button>

props.onSelect（e）}
>
挑选

对于任何感兴趣的人来说，这是一个解决方案：

为自定义按钮创建了一个类

import React from 'react';
import {Button}  from 'react-bootstrap';

export default class CustomButtons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            length: props.length,
            onClear: props.onClear,
            onSelect: props.onSelect
        }
    }

    render() {
        if (this.state.length < 10) {
            return(<div></div>);
          } else {
            return (
              <div >
                <div className="select-div">
                  <Button 
                    size="sm"
                    onClick={this.state.onSelect}
                    >
                    Select
                  </Button>
                </div>
                <div className="clear-div">
                  <Button 
                    size="sm"
                    onClick={this.state.onClear}
                    >
                    Clear
                  </Button>
                </div>
              </div>
              );
          } 
    }
}

从“React”导入React；
从“react bootstrap”导入{Button}；
导出默认类CustomButtons扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
长度：道具，长度，
onClear:props.onClear，
onSelect:props.onSelect
}
}
render（）{
如果（此.state.length<10）{
return（）；
}否则{
返回(
挑选
清楚的
);
} 
}
}

然后在主应用程序组件中

<CustomButtons 
    length={value.data.result.length} 
    index={indexNo} 
    onClear={(e) => this.onClear(e)}
    onSelect={(e) => this.onSelect(e)}
 >
 </CustomButtons>

this.onClear（e）}
onSelect={（e）=>this.onSelect（e）}
>

在这种情况下不需要使用类。你能提供OnDead和OnDead方法吗？他们现在只打印“点击”到控制台-所以我认为它们与问题无关。实际上，上面的例子看起来是正确的，它应该工作，需要看到整个组件，其中CustomButtons是PROSESECT检查这个。CustomButtons是在主渲染函数内。我看到沙箱代码似乎可以工作。所以也许我真的需要一个单独的类和一个引用？实际上我已经尝试过了，但它不起作用。我开始认为“this”实际上是指按钮不在包含函数的模块内的下拉列表。它是否会（在控制台中）显示任何错误，还是什么都不做？你记得绑（这个）吗？什么也不做。我应该在哪里绑定（这个）？感谢您的帮助，我将尝试为CustomButton单独设置一个类是的，很抱歉，如果您不向我们展示您的主要组件的其余部分，我将无法帮助您…1）您不需要设置道具来声明；2） 您不需要使用类，只需使用功能组件是的，我看到您的沙盒代码可以正常工作。我不明白为什么我的不是。我只想把它作为一个独立的类来使用。哈哈，谢谢你的帮助。

<CustomButtons 
    length={value.data.result.length} 
    index={indexNo} 
    onClear={(e) => this.onClear(e)}
    onSelect={(e) => this.onSelect(e)}
 >
 </CustomButtons>