React でクリックして非表示と表示を実装する方法

クリックして非表示にする表示を実装するための React メソッド: 1. スタイルを使用して表示と非表示を切り替えます。「{{display:this.state.isShow?'block':'none'}}」などのコードです。 ; 2. 3 つを使用する メタ オペレーターは、「this.state.isShow?(...):(...)」などのコードを使用して非表示と表示を実装します。 3. 短絡ロジックを通じて要素を表示および非表示にします。 「this.state.isShow&

...

」などのコード。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応でクリック時に非表示および表示するにはどうすればよいですか?

react で要素の表示メソッドと非表示メソッドを使用する

react には、一般的に使用される 4 つのメソッドがあります。要素の表示、非表示を表示する方法です。vue とは異なり、vue では要素の表示、非表示を v-if または v-show を使用して表示します。メソッド

最初のもの: 表示と非表示にスタイルを使用します

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

block は表示を意味し、none は非表示を意味します

2 つ目: 三項演算子を使用します

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

3 番目のタイプ: 短絡ロジックによる要素の表示と非表示

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

4 番目のタイプ: 機能形式

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

推奨される学習: "

react ビデオ チュートリアル

"

以上がReact でクリックして非表示と表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。