Reactjs 如何在React.js中为单击事件使用write三元运算符

我在应用程序中使用了几个三元运算符，但我不知道如何在点击事件中使用三元运算符

我正在做的是一份爆米花菜单。一旦某个菜单项被选中，该菜单项将不可单击。只能单击另一个菜单项

形象

我尝试了以下代码，但没有成功。我们不能在React中对click事件使用三元运算符吗

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

{！this.state.priceBar？“过去14天内度过”：“过去14天内”

完整代码

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

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片：错，
priceBar：错，
开：错，
}
this.handleClick=this.handleClick.bind（this）；
this.clickHandle=this.clickHandle.bind（this）；
}
handleClick（）{
这是我的国家({
slideOpen:！this.state.slideOpen
})
console.log（“slideOpen”+！this.state.slideOpen）
}
clickHandle（）{
这个.setState（{
priceBar:！this.state.priceBar，
开放：假
})
console.log（！this.state.priceBar）
}
handleTouchTap=（事件）=>{
//这可以防止鬼点击。
event.preventDefault（）；
这是我的国家({
开放：是的，
主持人：event.currentTarget，
});
};
HandlerRequestClose=（）=>{
这是我的国家({
开：错，
});
};
render（）{
const PaymentPanel=this.state.slideOpen？“slideOpen”：“；
const Dropdown=this.state.open？“show”：“；
返回(
{！this.state.priceBar？“过去14天”：“过去30天”}

{！this.state.priceBar？“过去14天的花费”：“过去14天的花费”}
{this.state.priceBar？“过去30天的花费”：“过去30天的花费”}
{！this.state.priceBar？$9964.55:“$19929.1”}


VISA
{！this.state.priceBar？$9504.13:“$19008.26”}
万事达卡
{！this.state.priceBar？$490.64:“$981.28”}
贝宝
{！this.state.priceBar？$824.52:“$1649.04”}

{this.state.slideOpen？：}


)
}
}

当然，三元运算不能用于返回dom的属性，因为表达式的返回值是字符串，浏览器和react.js引擎不会将字符串视为属性

相反：

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

修改您的代码：

handleTouchTap(event){

}

handleRequestClose() {
}

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片：错，
priceBar：错，
开：错，
}
this.handleClick=this.handleClick.bind（this）；
this.clickHandle=this.clickHandle.bind（this）；
}
handleClick（）{
这是我的国家({
slideOpen:！this.state.slideOpen
})
console.log（“slideOpen”+！this.state.slideOpen）
}
clickHandle（）{
这个.setState（{
priceBar:！this.state.priceBar，
开放：假
})
console.log（！this.state.priceBar）
}
handleTouchTap（事件）{
//这可以防止鬼点击。
event.preventDefault（）；
这是我的国家({
开放：是的，
主持人：event.currentTarget，
});
}
HandlerRequestClose（）{
这是我的国家({
开：错，
});
}
render（）{
const PaymentPanel=this.state.slideOpen？“slideOpen”：“；
const Dropdown=this.state.open？“show”：“；
返回(
{！this.state.priceBar？“过去14天”：“过去30天”}
{！this.state.priceBar？“过去14天的花费”：“过去14天的花费”}（单击我！）
单击顶行
)
}
}
ReactDOM.render（，document.querySelector（'.app'））

---

当然，三元运算不能用于返回dom的属性，因为表达式的返回值是字符串，浏览器和react.js引擎不会将字符串视为属性

相反：

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

修改您的代码：

handleTouchTap(event){

}

handleRequestClose() {
}

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片：错，
priceBar：错，
开：错，
}
this.handleClick=this.handleClick.bind（this）；
this.clickHandle=this.clickHandle.bind（this）；
}
handleClick（）{
这是我的国家({
slideOpen:！this.state.slideOpen
})
console.log（“slideOpen”+！this.state.slideOpen）
}
clickHandle（）{
这个.setState（{
priceBar:！this.state.priceBar，
开放：假
})
console.log（！this.state.priceBar）
}
handleTouchTap（事件）{
//这可以防止鬼点击。
event.preventDefault（）；
这是我的国家({
开放：是的，
主持人：event.currentTarget，
});
}
HandlerRequestClose（）{
这是我的国家({
开：错，
});
}
render（）{
const PaymentPanel=this.state.slideOpen？“slideOpen”：“；
const Dropdown=this.state.open？“show”：“；
返回(
{！this.state.priceBar？“过去14天”：“过去30天”}
{！this.state.priceBar？“过去14天的花费”：“过去14天的花费”}（单击我！）
单击顶行
)
}
}
ReactDOM.render（，document.querySelector（'.app'））

---

如果在React中使用函数而不是类：

onClick={() => condition ?  functionToClick() : null}

---

如果在React中使用函数而不是类：

onClick={() => condition ?  functionToClick() : null}

---

！这个.sate.priceBar

这里的

状态

是否输入错误？@ShubhamJain否。我使用状态检查