Cara melaksanakan klik untuk menyembunyikan dan memaparkan dalam tindak balas

Kaedah bertindak balas untuk melaksanakan paparan klik untuk sembunyikan: 1. Gunakan gaya untuk menunjukkan dan menyembunyikan, kod seperti "{{display:this.state.isShow?'block':'none'}}" ; 2. Gunakan tiga Operator meta melaksanakan penyembunyian dan paparan, dengan kod seperti "this.state.isShow?(...):(...)" 3. Paparkan dan sembunyikan elemen melalui logik litar pintas, dengan kod seperti "this.state.isShow&&

...

”.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menyembunyikan dan memaparkan pada klik dalam bertindak balas?

Menggunakan paparan dan kaedah menyembunyikan unsur dalam tindak balas

Secara tindak balas, kami mempunyai empat yang biasa digunakan Di sana ialah cara untuk memaparkan paparan dan penyembunyian elemen Berbeza dengan vue, dalam vue kita menggunakan v-if atau v-show untuk memaparkan penyembunyian dan paparan elemen

Berikut akan memperkenalkan cara menyembunyikan dan memaparkan. elemen dalam bertindak balas. Kaedah

Yang pertama: gunakan gaya untuk memaparkan dan menyembunyikan

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第一种方式，用style来显示隐藏*/}
        <button style={{display:this.state.isShow?&#39;block&#39;:&#39;none&#39;}}>张云龙</button>
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

sekat bermakna paparan, tiada bermaksud menyembunyikan

Yang kedua: gunakan operator ternary

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {/*第二种方法，用三元运算符*/}
            {
            this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Kaedah ketiga: paparkan dan sembunyikan elemen melalui logik litar pintas

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第三种方式*/}
          {
            this.state.isShow && <div>秦霄贤</div>
        }
        {
            !this.state.isShow && <div>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Kaedah keempat: bentuk berfungsi

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
        love:'秦霄贤'
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case '秦霄贤':
                return <div>秦霄贤</div>
            case '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Disyorkan kajian: "tutorial video bertindak balas》

Atas ialah kandungan terperinci Cara melaksanakan klik untuk menyembunyikan dan memaparkan dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!