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

Question

我是 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)

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

谢谢 西奥。

Answer 1

您可以使用状态来处理 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;