React: ボタンの使い方

プロジェクトの作成

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

次を作成します。

```js: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;

// -------------------------------------------------------------------
```

次を書き換えます。

```js: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/aec79ea0-930e-62cb-3c1e-1fe9552a5c5b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/d1e0c8dc-cef0-9e6a-8a63-3f3825a6f47c.png)