相关疑难解决方法(0)

我试图在javascript中包围promise对象.所以我在这里有一小段代码.我有一个promise对象和两个console.log()在promise对象的两边.我以为它会打印

你好

那里

zami

但它打印出来了

HI

zami

there

为什么它就像那样.我对如何工作没有任何理解,但我理解异步回调在javascript中是如何工作的.任何人都可以对这个主题有所了解吗？

console.log('hi');
var myPromise = new Promise(function (resolve, reject) {
    if (true) {
        resolve('There!');
    } else {
        reject('Aww, didn\'t work.');
    }
});

myPromise.then(function (result) {
    // Resolve callback.
    console.log(result); 
}, function (result) {
    // Reject callback.
    console.error(result);
});
console.log('zami');

所有:

我想知道是否有可能将多个事件处理程序绑定到同一事件？

例如:

var LikeToggleButton = React.createClass({
    render: function(){
        (function toggle(){
            this.setState({liked:!like});
        }).bind(this);
        return (
            <div onClick={toggle}>TOGGLE LIKE</div>  
        );
    }
});

在此之前,一切看起来都很正常,但我想为该按钮添加另一个功能,由其他选项决定:

例如,我有另一个开关组件(可能是像复选框或单选按钮等),称为"计数切换",启用后,LikeToggleButton的按钮将添加另一个onClick处理程序,它开始计算点击按钮的时间,我知道它可能是predesignd到切换功能,但我只是想知道是否有办法将此部分附加到onClick处理程序？

谢谢

嘿〜我正在尝试在React上的同一个onClick上触发提交功能和谷歌点击事件.我如何在React中执行此操作？

这是代码:

<button className={s.button} onClick={this.submit} onClick={ () => {gaClickEvent('where-to-buy', 'submit' , undefined)}}>

我见过很多关于在 React onclick 中调用多个传统声明函数的线程，但我很困惑如何使用箭头函数来实现它。我有一个名为 handleClose 的函数，它可以关闭 Material UI 菜单：

const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };

我有一个名为handleModalOpen的函数，它打开一个Material UI Modal：

const [modalOpen, setModalOpen] = React.useState(false);
const handleModalOpen = () => {
  setModalOpen(true);
};

当我单击此菜单项时，我希望这两个功能都运行。这两个功能单独工作都很好。那么我该如何实现这一目标呢？（目前我只设置了它以便模式打开）

<MenuItem onClick={handleModalOpen}>Add Album</MenuItem>

基本上我有一个触发菜单的按钮，然后单击这些菜单选项之一应该在关闭菜单时触发模式。此外，这是一个功能组件。

我正在编写输入元素的扩展版本。这是它的简化版本：

var MyInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeHandler} {...this.props} />
            </div>
        );
    },

    changeHandler: function(event){
        console.log('Trigger me first');
    }
});

我在这样的上下文中使用它：

<MyInput placeholder="Test" value={this.state.myValue} onChange={function(event){
    console.log('Trigger me second');
}} />

您可能会怀疑onChange，根据属性的顺序，其中一个会覆盖另一个。

考虑到这一点，在这种情况下，对于同一元素，您认为对同一事件的多个事件处理程序实现支持的最干净的方法是什么？

编辑

changeHandler: function(event)
{
        console.log('input_changeHandler change');
        this.props.onChange(event);
}

但是我担心它是否安全。

在我的 Class 组件中，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()当我单击 a 中的子组件时正在处理它<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>
);

但是现在我想在<div>单击时处理第二个功能，例如：

 toggleFullScreen() { …