React: ボタンの使い方

プロジェクトの作成

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;
// -------------------------------------------------------------------

実行結果

ボタンを横に並べる

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;
// -------------------------------------------------------------------

実行結果