React 受控组件

复习 2019-1-22

1.受控组件：在原生的HTML中，input（type=‘text’） textarea select 三个元素的内部的属性可以随着用户的输入变化。

2.react 中使用 state 控制属性的变化，将原生的受控组件和 react 中 state 结合。

class Text extends React.Component {constructor(props) {super(props);this.state = {value: ''};}handleChange = (e) => {let text = e.target.value.trim();this.setState({value: text});} handleSubmit = (e) => {e.preventDefault();seafile.addComment(this.state.value).then((res) => {console.log(res.data.success);})}render() {<form><input type="text" value={this.state.value} onChange={this.handleChange}/><button onClick={this.hanldeSubmit}>Submit</button></form>}
}

使用受控组件可以过滤用户输入，在handlechange 函数中，设置正则表达式或者简单的trim函数可以过滤部分输入。

<input type='file' />是非受控组件。将本地的n个文件上传到服务器中。

当界面上有多个input时，可以只写一个函数，handleinputChange 处理所有的input输入。通过 event.target.type 或者 event.target.name 进行选择，判断是哪个组件发生输入并进行不同的界面操作。

<input type="textarea" name="comment" onChange="handleInputChange"/>
<input type="checkoutbox" name="comment-number" onChange="handleInputChange"/>

handleInputChange = (e) => {let value = e.target.type === 'textarea' ? e.target.value : e.target.checked;const name = e.target.name;this.setState({//});
}

受控组件使用很多会形成很多的处理函数（2n）根据场合使用受控组件和非受控组件。

React 受控组件相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
React 受控组件和非受控组件（总结）
React 受控组件和非受控组件文章目录 React 受控组件和非受控组件受控组件非受控组件拓展:什么是***event*.target** 受控组件在React中,可变的状态通常保存在组件 ...
react受控组件与非受控组件
react受控组件与非受控组件区别在于: 受控组件中输入框的值由其change事件接管,做对应的数据劫持操作,例如可以对输入框的值进行合法输入校验(匹配正则),此时表单数据由 React 组件来管理( ...
react受控组件和非受控组件区别
一.受控组件在HTML中,表单元素的标签..等的值改变通常是根据用户输入进行更新. 在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的Re ...
4.react受控组件与非受控组件
一.非受控组件表单中输入类DOM的值现用现取 <script type="text/babel">//创建组件class Login extends React.Co ...
React受控组件和非受控组件的区别
1,受控组件: 在React中默认可以完成从state到表单value的动态绑定. 给input提供onchange事件,一旦检测到文本框内容有变化,马上执行onchange事件获取表单的内容. 2, ...
React受控组件非受控组件
受控组件:广义上的说法是 react组件的数据渲染是被调用者传递的props完全控制受控组件:statec成为唯一的数据源,不接受ref读取值 //非受控组件不利于组件通信局限性 export ...
React - 受控组件与非受控组件（实践妙用-模糊查询）
文章目录前言表单中的非受控组件受控组件受控组件实践妙用(真实请求Ajax - 模糊查询) 广义上的受控组件父传子与子传父之间的通信前言受控组件有俩种不同的定义: 狭义上我们关注于表单的受 ...

React 受控组件

React 受控组件

React 受控组件相关推荐

最新文章

热门文章