LoginSignup
0

More than 1 year has passed since last update.

React: ボタンの使い方

Last updated at Posted at 2022-07-05

プロジェクトの作成

create-react-app re03
cd re03
yarn add bootstrap react-bootstrap
yarn start

次を作成します。

src/components/ColorControl.js
// -------------------------------------------------------------------
//	components/ColorControl.js
//
//						Jul/05/2022
// -------------------------------------------------------------------
import React,{ Component } from 'react';
// import {Button, ButtonToolbar} from 'react-bootstrap';
import Button from 'react-bootstrap/Button';

// -------------------------------------------------------------------
class ColorControl extends Component {
    constructor(props) {
        super(props);
        // reactではデータの保存にstateを使います。
        // App.jsで設定したtitleをこのように取得できます。(this.props.title)
        this.state = {
            title: this.props.title,
            color: [0,0,0],
	message: "*****"
        }
        // イベントハンドラーでthisを使いたい場合はBindする必要があるのでConstructorに定義する
        this.handleClickButton = this.handleClickButton.bind(this);
    }

    handleClickButton() {
        const new_color = [
            Math.floor((Math.random()*55) + 200),
            Math.floor((Math.random()*55) + 200),
            Math.floor((Math.random()*55) + 200)
        ];

console.log(this.props.title);
var new_message = "****";
switch (this.props.title) {
	case	"AA":
		new_message = "Hello";
		break;

	case	"BB":
		new_message = "Morning";
		break;

	case	"CC":
		new_message = "Afternoon";
		break;

	case	"DD":
		new_message = "Evening";
		break;

	case	"EE":
		new_message = "Night";
		break;
	}
console.log(new_message);

        //stateを変更するときは必ずsetStateで変更、stateが変更されるとViewはレンダリングされる
        this.setState(
            {
                color: new_color,
		message: new_message
            }
        );
    }

    render() {
        const title = this.state.title; 
        const color = this.state.color;
        const style = {
		width: 100,
            background: `rgb(${color[0]},${color[1]},${color[2]}`
        };

        return (
            <div style={style}>
                <Button style={{color:'green'}}  onClick={this.handleClickButton}>{title}</Button>
		<div>{title}
		&nbsp;&nbsp;
		{this.state.message}</div>
		<div>{color[0]}, {color[1]}, {color[2]}</div>
            </div>
        )
    }
}

export default ColorControl;

// -------------------------------------------------------------------

次を書き換えます。

src/App.js
// -------------------------------------------------------------------
//	App.js
//
//					Jul/05/2022
// -------------------------------------------------------------------
// import Button from 'react-bootstrap/Button';
import ColorControl from './components/ColorControl';

import './App.css';

// -------------------------------------------------------------------
const ExampleToast = ({ children }) => {
  return (
    <>
<ColorControl title="AA"/>
	&nbsp;
<ColorControl title="BB"/>
	&nbsp;
<ColorControl title="CC"/>
	&nbsp;
<ColorControl title="DD"/>
	&nbsp;
<ColorControl title="EE"/>
	&nbsp;
<p>Jul/04/2022</p>
    </>
  );
};

// -------------------------------------------------------------------
const App = () => (
<>
      <h1 className="header">React-Bootstrap ボタンのクリック</h1>
      <ExampleToast>
      </ExampleToast>
</>
);

export default App;
// -------------------------------------------------------------------

実行結果
image.png

ボタンを横に並べる

ButtonToolbar を使います。

src/App.js
// -------------------------------------------------------------------
//	App.js
//
//					Jul/07/2022
// -------------------------------------------------------------------
// import Button from 'react-bootstrap/Button';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import ColorControl from './components/ColorControl';

import './App.css';

// -------------------------------------------------------------------
const ExampleToast = ({ children }) => {
  return (
    <>
<ButtonToolbar>
<ColorControl title="AA"/>
	&nbsp;
<ColorControl title="BB"/>
	&nbsp;
<ColorControl title="CC"/>
	&nbsp;
<ColorControl title="DD"/>
	&nbsp;
<ColorControl title="EE"/>
	&nbsp;
</ButtonToolbar>
<p>Jul/07/2022</p>
    </>
  );
};

// -------------------------------------------------------------------
const App = () => (
<>
      <h1 className="header">React-Bootstrap ボタンのクリック</h1>
      <ExampleToast>
      </ExampleToast>
</>
);

export default App;
// -------------------------------------------------------------------

実行結果
image.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0