首页>demo08

Demo08 - Form表单 by zuojj at 01 Jul 2016

文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

HTML

<div id="form-outer"></div>

JAVASCRIPT

var Form = React.createClass({
    getInitialState: function() {
        return {username: '张三'}
    },
    handleChange: function(ev) {
        this.setState({
            username: ev.target.value
        })
    },
    render: function() {
        var _username = this.state.username;
        return (
            <div>
                <input type="text" name="username" placeholder="请输入用户名称" value={_username} onChange={this.handleChange}/>
                <p>Hello,{_username}</p>
            </div>
        );
    }
});

ReactDOM.render(<Form/>, document.getElementById('form-outer'));