12React unidirectional data operation in the text box

1: Create a following code written inside Child4.js

import React, { Component } from 'react'

export default class Child4 extends Component {
    constructor(props){
        super(props);
        this.state = {
            num:10
        }
    }
    add=()=>{
            this.setState({
                num:this.state.num+1
            })
    }
    reduce=()=>{
            this.state.num -=1 ;
            this.forceUpdate();
    }

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

                }}></input>
                <button onClick={()=>{
                    this.reduce()
                }
                }>减法</button>
            </div>
        )
    }
}

2: The following code is explained