Reactのみで簡易掲示板

Reactを用いて↓のような簡易掲示板を作ったのでメモ。

コンポーネントに分けず、Stateのみを用いたパターンと、コンポーネントにわけPropsを用いたパターンの2つを実装してみました。

実装

今回は値の追加にformは用いていません。handleInputChangeメソッド をつくり、input/textareaの値の変化をstateに反映させます。そして、追加ボタンクリック時に呼ばれるaddCommentメソッドで更新されたstateをviewに表示しています。

コンポーネントに分けずstateのみを仕様

import React, { Component } from 'react';

class App extends Component {

  // コンストラクタでstateを初期化
  constructor() {
    super();
    this.state = {
      name: '名無し',
      comment: '',
      commentList: []
    };
  }
  // input, textareaに値が入るとstateを更新する
  handleInputChange = (e) => {
    switch (e.target.name) {
      case 'name':
        this.setState({
          name: e.target.value
        })
        break;
      case 'comment':
        this.setState({
          comment: e.target.value
        })
        break;
      default:
        break;
    }
  }
  // stateを更新
  addComment = () => this.setState({
    commentList: [
      ...this.state.commentList,
      {
        name: this.state.name,
        comment: this.state.comment
      }
    ]
  })

  render() {
    return (
      <div style={{width: 500, margin: 'auto'}}>
        <input name='name' type='text' placeholder='名前' onChange={this.handleInputChange}/><br />
        <textarea name='comment' style={{width: 400, height: 100}} onChange={this.handleInputChange} placeholder='何か書いてね'/>
        <input type='submit' value='追加' onClick={this.addComment}/>
        <table>
          <thead>
            <tr>
              <th>名前</th>
              <th>コメント</th>
            </tr>
          </thead>
          <tbody>
          {
            this.state.commentList.map((comment, index) => (
              <tr key={index}>
                <td>{comment.name}</td>
                <td>{comment.comment}</td>
              </tr>
            ))
          }
          </tbody>
        </table>
      </div>
    )
  }
}

export default App;

コンポーネントにわけPropsを使用

import React, { Component } from 'react';

class App extends Component {

  constructor() {
    super();
    this.state = {
      name: '名無し',
      comment: '',
      commentList: []
    };
  }

  handleInputChange = (e) => {
    switch (e.target.name) {
      case 'name':
        this.setState({
          name: e.target.value
        })
        break;
      case 'comment':
        this.setState({
          comment: e.target.value
        })
        break;
      default:
        break;
    }
  }

  addComment = () => this.setState({
    commentList: [
      ...this.state.commentList,
      {
        name: this.state.name,
        comment: this.state.comment
      }
    ]
  })

  render() {
    return (
      <Components handleInputChange={this.handleInputChange} addComment={this.addComment} commentList={this.state.commentList} />
    )
  }
}

const Components = (props) => (
  <div style={{width: 500, margin: 'auto'}}>
    <input name='name' type='text' placeholder='名前' onChange={props.handleInputChange}/><br />
    <textarea name='comment' style={{width: 400, height: 100}} onChange={props.handleInputChange} placeholder='何か書いてね'/>
    <input type='submit' value='追加' onClick={props.addComment}/>
    <table>
      <thead>
        <tr>
          <th>名前</th>
          <th>コメント</th>
        </tr>
      </thead>
      <tbody>
      {
        props.commentList.map((comment, index) => (
          <tr key={index}>
            <td>{comment.name}</td>
            <td>{comment.comment}</td>
          </tr>
        ))
      }
      </tbody>
    </table>
  </div>
)

export default App;

　以上、メモでした。