In the form of a DOM operations 13React

1: a new writing inside Child5.js

import React, { Component } from 'react'

export default class Child5 extends Component {
    constructor(props){
        super(props);
        this.state = {
            num:10
        }
        this.add = this.add.bind(this);
        this.getNum = this.getNum.bind(this);
    }
    getNum(){
       alert(this.refs.msg.value);
       this.refs.msg.style.color ="red";
    }
    
    add(){
            this.setState({
                num:this.state.num+1
            })
    }
  
    reduce=()=>{
          
    }

    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.add()
                }}>加法</button>
                <input value={this.state.num} onChange={()=>{

                }} ref="msg"></input>
                <button onClick={this.add
                }>减法</button>
                <button onClick={this.getNum}>获取文本框的值</button>
            </div>
        )
    }
}

2: The following code comments

 

The following code app.js

import React, { Component } from 'react'
import Child1 from "./Child1";
import Child2 from './Child2';
import Child3 from './Child3';
import Child4 from  './Child4';
import Child5 from  './Child5';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state ={
            from:"我是app的数据"
        }
    }
    show=()=>{
        alert("66666");
    }
    render() {
        return (
            <div>
                <Child1>
                </Child1>
                <Child2  from={this.state.from}>
                    <button onClick={()=>{
                        this.show()
                    }}>按钮</button>
                   <button onClick={this.show}>按钮</button>
                </Child2>
                <Child3></Child3>
                <Child4></Child4>
                <Child5></Child5>
            </div>
        )
    }
}