reactでhover or clickしたときhtmlを作成,削除したい

twitterのこんな感じのものをreactで作りたいと思っています。

やりたい条件：

clickすると、htmlが作成。作られたhtmlも押すことができる。別のところを押すと、htmlを消すことができる。
これのhover versionも作成してみたい。mouseoverとmouseleave。

現状：

現状はこんな感じです。今は、mouseoverで作成している。

解決したいこと：

htmlを作成はできたのですが、mouseleaveしたときor再度clickしたときにhtmlを無くしたい（削除したい）のですが、やり方がわかりません。
何か、解決策をご教授願いたいです！！
reactに関しては超初学者です。m(._.)m

<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>React Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <div id="content"></div>
  <script type="text/babel">
    //ここにコードが入ります


    class Hov extends React.Component {
      constructor(props) {
        super(props);
        this.state = { //define state
          value: null,
        };
      }

      createhtml() { //function
        return (
          <div class="down">
            <div>aaa</div>
            <div>bbb</div>
            <a href="#">333</a>
          </div >
        )
      }


      render() {
        var html = this.createhtml()
        return (
          <div class="contents">
            <div class="up">
              <button
                onMouseOver={() => this.setState({ value: html })}>押して
                </button>
            </div>
            {this.state.value}
          </div >

        )
      }
    }

    ReactDOM.render(
      < Hov />,
      document.getElementById('action')
    )
       // ここにコードが入ります</script>
  <div id="action" style="height:80px;width:50px"></div>
</body>

</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

このような場合、よくやる手としては、<div class="down">・・・</div>の部分を子コンポーネントとして切り出して、それを render する対象に含めるか否かというフラグを親コンポーネントの this.stateに持たせ、このフラグをthis.setState（･･･) でトグルするという方法です。

以下、サンプルコードです。以下では、子コンポーネントを DownPart という（関数型の）コンポーネントとし、表示・非表示のフラグを this.state.displayingDown としています。

jsx
1const DownPart = () => (
2  <div class="down">
3    <div>aaa</div>
4    <div>bbb</div>
5    <a href="#">333</a>
6  </div >
7)
8
9
10class Hov extends React.Component {
11  constructor(props) {
12    super(props)
13    this.state = { displayingDown: false }
14  }
15  
16  displayDownPart = () => {
17    this.setState({ displayingDown: true })
18  }
19  
20  undisplayDownPart = () => {
21    this.setState({ displayingDown: false })
22  }
23  
24  toggleDownPart = () => {
25    const { displayingDown } = this.state
26    this.setState({ displayingDown: !displayingDown })
27  }
28  
29  render() {
30    const { displayingDown } = this.state
31    return (
32      <div class="contents">
33        <div class="up">
34          <button 
35            type="button"
36            onMouseOver={this.displayDownPart}
37            onMouseOut={this.undisplayDownPart}
38            onClick={this.toggleDownPart}
39          >
40            押して
41          </button>
42        </div>
43        {displayingDown && <DownPart />}
44      </div>
45    )
46  }
47}
48
49ReactDOM.render(
50  <Hov />,
51  document.getElementById('action')
52)

動作確認用CodePen： https://codepen.io/jun68ykt/pen/Rwwmrxy?editors=1010

以上、参考になれば幸いです。

追記

別の方法を挙げます。

<div class="down">・・・</div> の表示、非表示を切り替えられるようにすることが目的であるとすると、この部分のDOMは常に展開されているようにして、この divの CSS style display を block またはnone に切り替えるという方法も考えられます。

以下はそのサンプルです。