README.md

やりたいこと

admin/articles/1/editのページにて<li><a onClick={this._onMenuContentClick(1)}>見出し</a></li>(article_menu.jsx)をクリックをするたびに ContentsEditor.state.contentsに要素を追加しそれを更新・出力する。

現象

<li><a onClick={this._onMenuContentClick(1)}>見出し</a></li>で指定している_onMenuContentClick(1)がまだクリックされていないのにページ読み込み時に実行される ↓ ContentsEditor.onMenuClick(content)が無限回呼び出される ↓ 以下のエラーを吐く

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (native)
    at printWarning (http://localhost:8080/editor.js:210:42)
    at warning (http://localhost:8080/editor.js:238:22)
    at callHook (http://localhost:8080/editor.js:26130:13)
    at emitEvent (http://localhost:8080/editor.js:26140:7)
    at Object.onBeforeUpdateComponent (http://localhost:8080/editor.js:26425:5)
    at Object.receiveComponent (http://localhost:8080/editor.js:4677:40)
    at Object.updateChildren (http://localhost:8080/editor.js:22357:25)
    at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:8080/editor.js:27285:32)
    at ReactDOMComponent._updateChildren (http://localhost:8080/editor.js:27389:31)

article_menu.jsx

import React from 'react'

export default class ArticleMenu extends React.Component {
  _onMenuContentClick(content) {
    this.props.onMenuContentClick(content);
  }
  render() {
    return <div>
      <ul>
        <li><a>画像</a></li>
        <li><a>動画</a></li>
        <li><a>引用</a></li>
        <li><a>テキスト</a></li>
        <li><a onClick={this._onMenuContentClick(1)}>見出し</a></li>
        <li><a>twitter</a></li>
        <li><a>商品</a></li>
        <li><a>スポット</a></li>
      </ul>
    </div>
  }
}

contents_editor.jsx

import React from 'react'
import ArticleMenu from './article_menu.jsx'
import ContentHeadline from './content_headline.jsx'

export default class ContentsEditor extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      contents: []
    }
    this.onMenuClick = this.onMenuClick.bind(this);
  }
  onMenuClick(content) {
    this.setState(prevState => ({
      contents: this.state.contents + [content]
    }));
  }

  render() {
    return <div className="editor">
      <ArticleMenu onMenuContentClick={this.onMenuClick} />
      <ContentHeadline />
      {this.state.contents}
    </div>
  }
}

editor.js

import React from 'react'
import ReactDOM from 'react-dom'

import ContentsEditor from './components/contents_editor.jsx'

ReactDOM.render(<ContentsEditor />, document.getElementById('editor'))