이번 목표.

화면에 간단한 버튼을 추가하여 페이지의 배경색을 무작위로 바꾸는 간단한 React를 만들어 보세요~
버튼을 누르면 버튼을 들고 있는 DIV의 배경색이 무작위로 바뀝니다.

공부

구성 요소를 만듭니다.
state를 사용해 보세요.
사건을 처리해 보다.
props를 사용해 보세요.

상태

어셈블리에서 사용 가능한 상태를 관리합니다.
값이 변경되면 렌더가 화면을 업데이트하러 옵니다.
Hash에서 Key, Value 데이터 관리
업데이트할 때 직접 업데이트하는 경우 렌더가 실행되지 않기 때문에 화면이 업데이트되지 않습니다. 사용하지 마십시오~this.state.key='test'

constructor(props) {
  super(props);
  this.state={
      key: 'value',
      ....
  };
}

Props

구성 요소 속성
상위 어셈블리에서 Props로 설정된 정보를 서브어셈블리에서 사용합니다.
상위 어셈블리에 제목 입력
App.js

<ColorControl title="色を変えます！クリックしてください。"/>

서브어셈블리에서 제목 가져오기
ColorControl.js

this.props.title

프로젝트 생성

create-react-app 사용

$ create-react-app backgroud-button
$ cd background-button

components 폴더 만들기, ColorControl 생성 및 단추 추가

ColorControl.js

import React,{ Component } from 'react';

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]
        }
        // イベントハンドラーで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)
        ];
        //stateを変更するときは必ずsetStateで変更、stateが変更されるとViewはレンダリングされる
        this.setState(
            {
                color: new_color
            }
        );
    }

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

        return (
            <div style={style}>
                <button onClick={this.handleClickButton}>{title}</button>
            </div>
        )
    }
}

export default ColorControl;

App.js에 ColorControl 구성 요소 추가

다른 폴더에 구성 요소를 만들었기 때문에import에 폴더 경로를 추가합니다title예props.ColorControl 에서 this.props.title 데이터를 얻을 수 있습니다.
여기서 버튼의 제목을 설정했습니다.
App.js

import React from 'react';
import ColorControl from './components/ColorControl';

function App() {
  return (
    <div>
      <ColorControl title="色を変えます！クリックしてください。"/>
    </div>
  );
}

export default App;

완성!

다음은 부모 감청 프로그램에서 하위 조합 이벤트를 수신하고 처리하는 것입니다~