Reactのonclickが理解できません…
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 2,016
前提・実現したいこと
onclickなどをつかってボタンに関数呼び出しをつけたい。
発生している問題・エラーメッセージ
表示したボタンに対してonclick属性をつけることができない。
該当のソースコード
var menuList = [
{
id: "ADD",
clickHandler:data_add() //追加関数
},
{
id: "EXPORT",
clickHandler:data_export() //出力関数
},
{
id: "INPORT",
clickHandler:data_inport() //読み込み関数
}
];
const MenuList = props => {
return (
<ul>
{props.menuList.map(item => <MenuItem item={item}/>)}
</ul>
)
}
const MenuItem = props => {
return (
<li className="menu_button">
<button className={props.item.id} onclick={props.item.clickHandler}>
{props.item.id}
</button>
</li>
)
}
ReactDOM.render(
<MenuList menuList={menuList} />,
document.querySelector('#menu')
);試したこと
props.item.idの部分はきちんと適用されます。
clickHandlerに追加する値を文字列(""で囲む)にしてみましたが、「文字列型で渡されています」というエラーが吐かれました。
補足情報(言語/FW/ツール等のバージョンなど)
使用しているreactのバージョンとJSXTransformerのバージョンです
<script type="text/javascript" src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/javascript" src="https://fb.me/react-15.1.0.js"></script>
<script type="text/javascript" src="https://fb.me/react-dom-15.1.0.js"></script>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+4
関数data_addが関数を返す関数(いわゆる高階関数)でなければ、
clickHandler:data_add()
ではなく
clickHandler:data_add
だと思われます(他も同様に)。また、onclickではなくonClickが正しいです。大文字小文字は区別されたと思います。
onClickに指定できるものは関数そのもので無ければなりません。ある関数fがあった場合、fは関数そのものですがf()はその式が評価された時点で関数が評価され、評価された結果になります。この二つの意味は大きく異なります。
var a, b, c, f;
f = function() { return 1; };
a = { x: f() };
b = { x: f };
c = { x: function() { return f(); } };
a.xは関数fが評価された結果の1になります。これに対して、b.xは関数fそのものになります。c.xはb.xとほぼ同じような動作をする物になります。ですので、b.xやc.xをonClickに指定することは可能ですが、a.xを指定することはできません。JavaScirptでは関数そのものを通常のオブジェクトとして扱えるため、()のあるなしで、関数そのものをやり取りしているのか、関数を評価した結果をやり取りしているのかを意識するようにしてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/06/10 08:03
そのやり方で引数なしの関数呼び出しはうまく出来たのですが、bのやり方では引数は渡すことができないですよね？
引数を渡そうと思った場合、cのやり方を使えばonClickに対して f(hoge) を渡すことが出来るようになるのですか…？
2016/06/10 19:18
そうでは無く、onClickを指定時に何かしらの値を引数として渡しておきたい場合は、関数を返す関数を作る必要があります。詳しくは「高階関数」などのキーワードで調べてみてください。