Implementation of this.state?

Question

React

class AddInfo extends Component{


    state={
        value:""
    }


    render() {

        const {classes}=this.props
        const newStyles=injectSheet(styles)(AddInfo)
        const val=this.state.value



        return (

            <div>

                <input  type="text" className={classes.positionForm} onChange={this.changeState} />
                <input type="submit" value="value" />
                {val}

            </div>
        );
    }
    changeState=(event)=>{
        this.setState({
            value:event.target.value
        })
    }
}

Good night, I, being a newbie in React, ran into an implementation problem:
There is such a code. Using state, I display below everything that I wrote in the form, but I ran into a problem that I don’t know how to solve at all:

When entering, I PLANNED to do so that by clicking on the button / removing the cursor from my form, the entered data is displayed at the bottom, and the form is reset and becomes empty.
Naturally, you don’t need to write the code for me, I would just be glad to hear at least some ideas.
(For lack of styles don't kill)
Thanks in advance for any advice

Answer 1

The state should have two properties - the value of the input and its copy. In the input's onChange handler, update the value of the input; in the onClick handlers of the button and onMouseLeave of the form, copy the value of the input to the second property, and reset it itself.
Or you can try to get by with one property in the state, but then you need to add a ref to the input. There is no need to process change in this case.