React中的表单应用

Posted 2020-11-03 juxiu

React中的表单应用

用户在表单填入的内容，属于用户跟组件的互动，所以不能用this.props读取。

var Input = React.createClass({
    //初始化组件数据
    getInitialState(){
        return {value:‘hello‘};
    },
    handleChange(event){
        this.setState({value:event.target.value})
    },
    render(){
        var  value = this.state.value;
        <div>
            <input type=‘text‘ value={value}  onChange={this.handleChange} />
            <p>{value}</p>
        </div>
    }
});

ReactDOM.render(
    <Input />,
    document.body
);

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