反应添加事件监听器根据条件

如何将附加事件添加到jsx的基于条件的元素？下面的例子没有这样做，它只是通过一个标志到onClick函数，并没有真正附加事件。反应添加事件监听器根据条件

const { hasSomething, name } = this.props 

render(){ 
    return(
    <div onClick={()=>{hasSomething && this.fireSomething()}}>{name}/div> 
    ) 
}

我可以复制2 <div>，检查是否存在hasSomething然后将其连接到一个元素，但是这是一个糟糕的重复，我为{名称}声明两次。

来源

2017-12-27 Jenny Mok

我不认为这有什么不对您的逻辑。比方说，你也可以准备道具（基于不同的条件），并在'render（）'的渲染标记中传递道具变量/对象与传播'...'运算符。例如'

' –

怎么样：

render(){ 
    return(
     <div onClick={hasSomething && this.fireSomething}>{name}/div> 
    ) 
}

如果hasSomething连接监听器，否则onClick将收到不确定就像你不会通过任何东西。

如果上面没有你正在寻找你也可以做这样的事情的东西：

render(){ 
    const props = { 
    //... some props 
    } 

    if(hasSomething) { 
    props.onClick = this.fireSomething; 
    } 

    return(
     <div {...props}>{name}/div> 
    ) 
}

您创建一个认为应该传递给股利和以后使用蔓延运营商的每一个道具对象通过他们。

来源

2017-12-27 15:34:22 Tomasz

您仍然附上onClick。 –

@JennyMok我已经列举了另一个例子。也许这更多的是你正在寻找的东西。 – Tomasz

还记得绑定功能this，如果你需要引用道具/状态。我倾向于做建筑即 this.fireSomething = this.fireSomething.bind(this)

来源

2017-12-27 15:56:59

不，我使用箭头功能，不需要像你说的那样绑定。 –

我的做法是创建一个新的道具对象newProps根据this.props是否具有所需的属性，可能会或可能不会有一个onClick财产。

在此示例中，如果Foo未收到bar prop，则它不会创建具有onClick属性的新对象。

class Foo extends Component { 
    handleBar() { 
    console.log(this.props.bar); 
    } 

    render() { 
    const newProps = this.props.bar 
     ? { 
     ...this.props, 
     onClick: this.handleBar.bind(this), 
     } 
     : this.props 
    return <div { ...newProps }/> 
    } 
}

这里有一个live example on CodePen

来源

2017-12-27 17:34:34

等待，你只是想，如果满足条件调用一个方法？在这种情况下，你可以这样做：

render() { 
    return(
    <div onClick={() => { 
     if (hasSomething) { 
     this.fireSomething() 
     } 
    }} 
) 
}

或

fireSomething() { 
    if (hasSomething) { 
    // do logic 
    } 
} 

render() { 
    return(
    <div onClick={() => this.fireSomething()} 
) 
}

来源

2017-12-27 17:34:51

反应添加事件监听器根据条件

回答

相关问题