XKolento
XKolento

React笔记9（表单）

表单

在用户提交表单时，html的默认行为会使这个表单跳转到一个新页面，在React中也是这样。
在大多数情况下，我们都会构建一个处理提交表单并且可以访问输入数据的函数，实现这一点的标准的方法就是使用 “受控组件” 技术。

1.受控组件

在HTML中，像input，textarea，select，这类表单元素都会维持自身的状态，并且可以根据用户的输入进行更新。
在React中，可变状态通常保存在组件的状态属性中，并且只能通过setState()的方法进行更新。

我们通过使React变成一个单一的数据源来结合两者，React负责渲染表单的组件和后续控制表单被输入时发生的变化。相应的，被React的数据控制状态的表单组件被称为 受控组件。

demo
class NameForm extends React.Component{
    constructor(props){
        super(props);
        this.state={value:''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event){
        this.setState({
            value:event.target.value
        })
        console.log(event.target.value)
    }
    handleSubmit(event){
        alert('name：'+this.state.value);
        event.preventDefault();
    }
    render(){
        return(
            

                
                
            

        )
    }
}

ReactDOM.render(
    ,document.getElementById('root')
)

由于value的值是在表单上设定的this.state.value，所以显示的值始终绑定与React的state状态，并且每次按键输入都会触发this.handleChange()来更新React的state，所以展示的值也会一直更新。

使用 “受控组件” 每个状态的改变，都有一个与他相关的处理函数，这样就能直接修改或者验证用户的输入。
例如：限制全部的输入为 大写字母

//修改handleChange方法
handleChange(event){
    this.setState({
        value:event.target.value.toUpperCase()
    })
}
2.textarea标签

①在HTML中元素通过他的子节点来定义它的内容