2021/06/06 Reactの勉強を少しした。

勉強したことをメモがわりにブログを書く。

やりたいことはReactDOM.render()を複数個作ってみたい。さてやってみる。 詰まったとこ

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render(){
    return(
      <div>
        <input type="text" />
        <button onClick={this.handleClick}>SEND</button>
        {this.state.tenki}
      </div>
    );
  }

  handleClick(){
    ReactDOM.render(
      <React.StrictMode>
        <Add />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    
  }

  constructor(props) {
    super(props);
    this.state={tenki: <div>aaaa</div>};
    this.handleClick = this.handleClick.bind(this);
  }
  
}

class Add extends Component {
  render(){
    return(
      <div>
        <h1>aaaa</h1>
        <input type="text" />
      </div>
    );
  }
}

export default App;

これで困ったことはボタンを押すとAppの下にAddを作りたかったのだがこれを実行するとAppを上書きする形で更新されてしまう。 とりあえずの解決

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render(){
    return(
      <div>
        <input type="text" />
        <button onClick={this.handleClick}>SEND</button>
        {this.state.tenki}
        <div id='root1'></div>
      </div>
    );
  }

  handleClick(){
    ReactDOM.render(
      <React.StrictMode>
        <Add />
      </React.StrictMode>,
      document.getElementById('root1')
    );
    
    
  }

  constructor(props) {
    super(props);
    this.state={tenki: <div>aaaa</div>};
    this.handleClick = this.handleClick.bind(this);
  }
  
}

class Add extends Component {
  render(){
    return(
      <div>
        <h1>aaaa</h1>
        <input type="text" />
      </div>
    );
  }
}

export default App;

ようするにDOMを付ける場所(id=root)のところにするともともとあったDOMを上から更新してしまうみたい。 なのであたらしいidをもったdivを作ってそこにすると行けた。 果たしてこれがプログラム的に正しいのかは知らない。 まあこれでいろいろいじっていけばできそうだけどどうでしょう・・・。あと久しぶりにMarkdown記法を使った。 では・・・。