react

【React】componentでのonClickの使い方

ReactでonClickにメソッドをひもづけたときにundefinedエラーが出た。そのときに対応する方法がいくつかまとめておく。問題のコード class App extends React.Component { constructor() { super() this.state = { items: [] } } addItem() { this.setState(…

【react】form部品を共通化するときのひな形

はじめに ES6でのシンプルなものだけど共通化するとしたらこんな感じだろうか呼び出し側 import React from "react"; import FormPart from "./FormPart.jsx"; export default class Sample extends React.Component { constructor(props) { super(props); t…

【react】preventDefault、stopPropagationを使う

よく使うpreventDefaultとstopPropagation。 reactでも普通に使える export default class Sample extends React.Component { onParent(e) { // リンク先への遷移を抑制 e.preventDefault(); } onChild(e) { // onParentへのイベントを抑制 e.stopPropagatio…

【react】Expected onClick listener to be a function, instead got type stringエラー対応

はじめに reactをes6で使った場合です。 地味にはまった。。。自分の場合は以下の2パターン> パターン1イベントリスナーでメソッド呼び出すときにbindしていない export default class Sample extends React.Component { onClick() { console.log(this.statu…

【react】jqueryメインの非SPAシステムの特定ページでのみreactを導入してみたのでメモ

はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。作りたい画面のイメージとしてはこんなかんじメイン画面 モ…

react.jsでの開発の作業手順まとめメモ 〜 redux + router

はじめに まだまだよくわかっていないがやっと少し慣れてきたので自分用に作業手順をまとめておく ディレクトリ構成とベースとなる部分を作る 自分はこんな感じにしてみている。 基本的な構成がこんな感じで、開発するにつれてactions、components、reducers…

【react】ログイン・ログアウトを実装する方法メモ

はじめに 今回やりたかったことはよくあるログイン・ログアウトの実装です。 で、react-routerを使っての実装方法が以下にありました。わかりやすかったです React Routerで認証を制御する方法 - Qiitaログインしているかどうかの判定はstoreにuser.session…

【react】react-routerの使い方メモ

はじめに reactやらreduxやらいじり始めてみたけどわからないことが多い・・・ 今回やりたいのはコンポーネント間の画面遷移とりあえず画面遷移などでのルーティング機能はreact-routerというのを使ってる人が多そうなのでこれの使い方を調べてメモ 構成 . ├…

【react】react-routerにて画面遷移と「TypeError: this.context.router is undefined」の対応

はじめに 今回やりたかったことは component内で何かボタンとか押されたときに別のページへ遷移させるということをしたかったのですが 「TypeError: this.context.router is undefined」とエラーが・・・ 対応 修正前 export default class Page1 extends Re…