React中表单使用详解

这次给大家带来React表单使用详解,React中表单使用的注意事项有哪些,下面就是实战案例,一起来看一下。

表单

React 是个单向数据流的框架,所以在表单元素与其它 DOM 元素有所不同,而且和双向绑定的框架在操作上也有很大不一样。所以在这里单独拿出来说。

输入受控

import React from 'react'import ReactDOM from 'react-dom'class Component1 extends React.Component{    constructor(props){        super(props)        this.state = {            text: 'Hello React'        }    }    render(){        return (            

) }}ReactDOM.render(, document.getElementById('p1'));

登录后复制

这个案例说明了在 React 在表单元素因单向数据流所以在 value 给定后就无法再次修改,所以需要配合 onChange 事件来完成。所以上面的案例应该是这样的

class Component1 extends React.Component{    constructor(props){        super(props)        this.state = {            text: 'Hello React'        }    }    change = (e) => {        this.setState({text: e.target.value})    }    render(){        return (            

) }}

登录后复制

效果预览

textarea 元素

在普通 HTML 中,textarea 元素是节点文本值

登录后复制

但在 React 中,该元素需要使用 value 属性。

class Component1 extends React.Component{    constructor(props){        super(props)        this.state = {            text: 'Hello React'        }    }    change = (e) => {        this.setState({text: e.target.value})    }    render(){        return (