如何使用寫三元運算符在React.js中的點擊事件

我在我的應用程序中使用了幾個三元運算符，但我無法弄清楚如何在點擊事件中使用三元運算符。如何使用寫三元運算符在React.js中的點擊事件

我在做的是一個彈出菜單。一旦該菜單項已被選擇，其中一個菜單項將不可點擊。只有另一個菜單項應該是可點擊的。

圖片

我嘗試下面的代碼，但沒有奏效。我們不能在React中使用三元運算符來進行點擊事件嗎？

<p id="menuItem" {!this.sate.priceBar? onClick={this.clickHandle} : "" } style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>

完整代碼

class Home extends React.Component{ 

constructor(props){ 
    super(props); 
    this.state = { 
     slideOpen : false, 
     priceBar: false, 
     open: false, 
    } 
this.handleClick = this.handleClick.bind(this); 
this.clickHandle = this.clickHandle.bind(this); 
} 


handleClick() { 
    this.setState({ 
     slideOpen : !this.state.slideOpen 
    }) 
console.log("slideOpen" + !this.state.slideOpen) 
} 

clickHandle() { 

this.setState({ 
      priceBar : !this.state.priceBar, 
      open: false 
    }) 
console.log(!this.state.priceBar) 
} 

handleTouchTap = (event) => { 
// This prevents ghost click. 
event.preventDefault(); 

this.setState({ 
    open: true, 
    anchorEl: event.currentTarget, 
}); 
}; 

handleRequestClose =() => { 
this.setState({ 
    open: false, 
}); 
}; 

render(){ 
    const PaymentPanel = this.state.slideOpen? "slideOpen" : ""; 
    const Dropdown = this.state.open? "show" : ""; 

return(
<div> 
<div id="PaymentPanel" className={PaymentPanel} > 
<div id="PaymentTitle" >{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 30 Days"}<img src={PaymentArrow} className="PaymentArrow PaymentToggle" onClick={this.handleTouchTap}/></div> 
<div id="Dropdown" className={Dropdown} open={this.state.open}> 
<p className="popoverToggle" onClick={this.handleRequestClose}> </p> 
<p id="menuItem" onClick={this.clickHandle} style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p> 
<p id="menuItem" onClick={this.clickHandle} style={this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}</p> 
</div> 


<h2 id="paymentSum" className={!this.state.open? "" : "close"}>{!this.state.priceBar? "$9,964.55" : "$19,929.1"}</h2> 


<ul className="paymentTool"> 
<li> 
<div onClick={this.handleTouchTap} className="tool">VISA <br /> {!this.state.priceBar? "$9,504.13" : "$19,008.26"}</div></li> 
<li><div className="tool">MasterCard <br /> {!this.state.priceBar? "$490.64" : "$981.28"}</div></li> 
<li><div className="tool">PayPal <br /> {!this.state.priceBar? "$824.52" : "$1,649.04"}</div></li> 
</ul> 
<div className="paymentSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div> 
</div> 

<div className="PaymentTable" > 
<PaymentTable /> 
<ul> 
</ul> 
</div> 
</div> 
    ) 
} 
}

來源

2017-09-27 aaayumi

'this.sate.priceBar'這裏'state'是筆誤吧？ –

@ShubhamJain no。我使用狀態來檢查條件。 – aaayumi

當然，三元操作不能用於返回DOM的屬性，因爲表達的返回值是一個字符串，瀏覽器和react.js引擎不會將字符串視爲屬性。

相反：

onClick={!this.state.priceBar ? this.clickHandle : ''}

修改代碼：

handleTouchTap(event){ 

} 

handleRequestClose() { 
}

class Home extends React.Component{ 
 
constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     slideOpen : false, 
 
     priceBar: false, 
 
     open: false, 
 
    } 
 
    
 
this.handleClick = this.handleClick.bind(this); 
 
this.clickHandle = this.clickHandle.bind(this); 
 
} 
 

 

 
handleClick() { 
 
    this.setState({ 
 
     slideOpen : !this.state.slideOpen 
 
    }) 
 
console.log("slideOpen" + !this.state.slideOpen) 
 
} 
 

 
clickHandle() { 
 

 
this.setState({ 
 
      priceBar : !this.state.priceBar, 
 
      open: false 
 
    }) 
 
console.log(!this.state.priceBar) 
 
} 
 

 
handleTouchTap (event) { 
 
// This prevents ghost click. 
 
event.preventDefault(); 
 

 
this.setState({ 
 
    open: true, 
 
    anchorEl: event.currentTarget, 
 
}); 
 
} 
 

 
handleRequestClose() { 
 
this.setState({ 
 
    open: false, 
 
}); 
 
} 
 

 
render(){ 
 
    const PaymentPanel = this.state.slideOpen? "slideOpen" : ""; 
 
    const Dropdown = this.state.open? "show" : ""; 
 

 
return(
 
<div> 
 
<div id="PaymentPanel" className={PaymentPanel} > 
 
<div id="PaymentTitle" >{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 30 Days"}</div> 
 
<p id="menuItem" onClick={this.clickHandle} style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"} (Click me!)</p> 
 

 
click top line 
 

 

 
</div> 
 
</div> 
 

 
    ) 
 
} 
 
} 
 
ReactDOM.render(<Home />, document.querySelector('.app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div class="app"></div>

來源

2017-09-27 08:51:42 JiangangXiong

'this.clickHandle'沒有啓動，即使我點擊.. – aaayumi

你的代碼存在一些錯誤，我修改後，它可以工作。 – JiangangXiong

<p id="menuItem" onClick={!this.state.priceBar ? this.clickHandle : null}>

來源

2017-09-27 08:51:22

這是一個答案？如果是這樣，請添加解釋。 –

如何使用寫三元運算符在React.js中的點擊事件

回答

相關問題