gpt4 book ai didi

javascript - 在按钮单击时使用单击事件

转载 作者:行者123 更新时间:2023-12-03 07:25:13 25 4
gpt4 key购买 nike

我是 React 新手,假设我们有以下代码。

const showDetails = () => {
console.log('Show details')


}
const template = (
<div>
<h1>Vibility Toggle</h1>
<button onClick={showDetails}>Show details</button>
</div>
)

var app = document.getElementById('app')

ReactDOM.render(template, app)

我想要的是在单击按钮时将按钮的标题从显示详细信息更改为隐藏详细信息。所以我想在函数内获取单击事件并使用三元运算符更改标题。如何做到这一点?

谢谢西奥。

最佳答案

您可以使用状态来处理 react 中的切换事件。我添加了切换处理程序的片段。

import React, { Component } from 'react';

class App extends Component {

state = {
isVisible : true
}

toggleDetails = () => {
this.setState({
isVisible : !this.state.isVisible
});
}

render() {
return (<div>
<h1>Vibility Toggle ({this.state.isVisible ? "is Visible" : "is Not Visisble"})</h1>
<button onClick={this.toggleDetails}>{!this.state.isVisible ? "Show details" : "Hide details"}</button>
</div>)
}
}

export default App;

关于javascript - 在按钮单击时使用单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61093488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com