React.js:onClickでComfirm Windowsを表示するサンプルコード

Kuniyoshi Takemoto

9 years ago

This post is also available in: 日本語 (Japanese)

React.jsを使って開発していて、onClickをトリガーとしてComfirm Windowsを表示して、Trueの場合(OKをタップした場合)にのみ何かしらの処理を実行するサンプルコードです。

サンプルコード中には javascript ES2015(ES6) の新構文であるアロー関数(Arrow function)を使ってますので、見慣れない方は　React.jsでES2015(ES6)のアロー関数(Arrow Function =>)を使えるようにする　の記事を参考にしてみてください。

import React from 'react';

export class HandleSomethingData extends React.Component {

    constructor(props) {
        super(props);    
        this.handleData = this.handleData.bind(this);
    }
    
    handleData = () => {
        console.log('Success!!');
    }   

    render() {
        return (
            <div>
             <p>Export Ideas Data</p>
               <Button onClick={() => {if(confirm('Are you OK?')) {this.handleData()};}} >
             </div>
        );//return
    }//render
}//export class

Tags: React.js