Question

我在下拉菜单中有两个react bootstrap按钮，我试图了解为什么onClick事件不起作用。从功能返回按钮。如果仅在主要渲染功能中使用Button，就可以触发该事件。我想知道为什么会这样。从函数返回组件可以吗？还是我需要使用一个类？

代码：

{this.state.filterDropdowns.map((value, indexNo) =>
    <Dropdown 
        className="button"
        key={`${indexNo}`}     
        >                
       <Dropdown.Toggle variant="light" size="sm">
           {value.name}
       </Dropdown.Toggle>
       <Dropdown.Menu className="custommenu">
            {value.data.result.map((input, index) =>
            <div key={`${index}`}>
                <input
                    key={`${index}`} 
                    id={input} 
                    type="checkbox" 
                    defaultChecked
                   onClick={(e) => this.clickFilterBox(e, indexNo)}
                   >
                </input>{" " + input}<br></br>
            </div> 
            )}
        <Dropdown.Divider />
            <CustomButtons 
                length={value.data.result.length} 
                index={indexNo}
                onClear={(e) => this.onClear(e)} 
                onSelect={(e) => this.onSelect(e)}
                 >
             </CustomButtons>            
         </Dropdown.Menu>
    </Dropdown>
 )}

自定义按钮功能

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>
          );
      } 
    }

Answer 1

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

override fun onValueSelected(e: Entry?, h: Highlight?) {
    if (selectedEntry != null) {
        selectedEntry?.icon = null
    }
    for (set in chart.data.dataSets) {
        selectedEntry = set.getEntryForIndex(set.getEntryIndex(e))
        selectedEntry?.icon = ContextCompat.getDrawable(this,R.drawable.star)
    }
    chart.invalidate()
}

然后在函数中像这样实现它：

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

Answer 2

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

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

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>
              );
          } 
    }
}

然后进入主要应用程序组件

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

如何将点击事件传递给子组件

2 个答案: