代码之家 › 专栏 › 技术社区 › 8-Bit Borges

ReactJS-在click上处理两个函数

reactjs javascript

8-Bit Borges · 技术社区 · 4 年前

App.jsx 我有以下功能:

import { Position } from "./Position";
...

getPositionData = val => {
    const { players } = this.props;       
    var res = players.filter(o=>Object.values(o).includes(val))        
    return res
  };

正在处理 render() <div> ,如下所示:

<div className="field-row"> 
   {this.getPlayersByPosition(players, 4).map((player,i) => (
      <Position key={i} handleClick={this.getPositionData}>{player.name}</Position>
    ))} 
</div>

Position.jsx 把手 onClick()

export const Position = props => (
  <div
    className={`position-wrapper ${
      isManager(props.children) ? null : "field"
    }`}
    onClick={() => props.handleClick(props.children)}
  >
    {props.children}
  </div>
);

但是现在我想处理第二个函数 < 单击,例如:

 toggleFullScreen() {
    this.setState({ fullScreen: !this.state.fullScreen });
  }

我会自己通过,就像这样:

onClick={this.toggleFullScreen.bind(this)}

如何处理这两个功能 onClick()

<div className="field-row"> 
...
</div>

1 回复 | 直到 4 年前

CertainPerformance 4 年前

element.addEventListener('click', () => {
  fn1();
  fn2();
});

您可以通过定义 onClick

<Position
  key={i}
  getPositionData={this.getPositionData}
  toggleFullScreen={toggleFullScreen}
>{player.name}</Position>

export const Position = props => (
  <div
    className={`position-wrapper ${
      isManager(props.children) ? null : "field"
    }`}
    onClick={() => {
      props.getPositionData(props.children);
      props.toggleFullScreen();
    }}
  >
    {props.children}
  </div>
);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前