state的使用

通过state定义变量，setState修改变量状态

引用React,React-dom库，通过babel转化成jsx

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

实例采用class方式声明组件

 <script type="text/babel">
        class Input extends React.Component {
            constructor ( props ) {
                super( props );
                this.state = {
                    value:'Hello World'
                };
                this.handleClcik = this.handleClcik.bind(this);
            };
            handleClcik ( event ) {
                console.log( event );
                this.setState ( {
                    value:event.target.value
                })
            };
            render () {
                // let text = this.state.value;
                return (
                    <div>
                        <input type="text" value={ this.state.value } onChange={ this.handleClcik } />
                        <p> { this.state.value }</p>   
                    </div>
                );
            }; 
        };

        ReactDOM.render(
            <Input />,
            document.getElementById('example')
        )
    </script>

上面使用注释text的地方可以这样使用

  render () {
                let text = this.state.value;
                return (
                    <div>
                        <input type="text" value={ text } onChange={ this.handleClcik } />
                        <p> { text }</p>   
                    </div>
                );
            };