state-表单

/*
*
* 需求: 定义一个组件,可以将用户在输入框内输入的内容 进行实时显示
*
* 分析:组件与用户交互过程中,存在状态的变化,即输入框的值
*
* */
var Input = React.createClass({
    getInitialState:function () {
        return{
            value:"请输入"
        }
    },
    handleChange:function () {
        //通过event.target.value读取用户输入的值
        this.setState({
            value:event.target.value
        });

    },
    render:function () {
        var value = this.state.value;
        return(
            <div>
                <input type="text" value={value} onChange={this.handleChange}/>
                <p>{value}</p>
            </div>
        )
    }

});
ReactDOM.render(
        <Input/>,
        document.getElementById("container")
)