这次给大家带来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 (