2017-12-27 194 views
1

如何將附加事件添加到jsx的基於條件的元素?下面的例子沒有這樣做,它只是通過一個標誌到onClick函數,並沒有真正附加事件。反應添加事件監聽器根據條件

const { hasSomething, name } = this.props 

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

我可以複製2 <div>,檢查是否存在hasSomething然後將其連接到一個元素,但是這是一個糟糕的重複,我爲{名稱}聲明兩次。

+0

我不認爲這有什麼不對您的邏輯。比方說,你也可以準備道具(基於不同的條件),並在'render()'的渲染標記中傳遞道具變量/對象與傳播'...'運算符。例如'

' –

回答

1

怎麼樣:

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

您創建一個認爲應該傳遞給股利和以後使用蔓延運營商的每一個道具對象通過他們。

+0

您仍然附上onClick。 –

+0

@JennyMok我已經列舉了另一個例子。也許這更多的是你正在尋找的東西。 – Tomasz

0

還記得綁定功能this,如果你需要引用道具/狀態。我傾向於做建築即 this.fireSomething = this.fireSomething.bind(this)

+0

不,我使用箭頭功能,不需要像你說的那樣綁定。 –

0

我的做法是創建一個新的道具對象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

0

等待,你只是想,如果滿足條件調用一個方法?在這種情況下,你可以這樣做:

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

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

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