React 表单与事件

一个简单的实例

在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>react表单与事件</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">// 创建 HelloMessage 组件var HelloMessage = React.createClass({// 定义初始状态getInitialState: function() {return {value: 'Hello World'}; // 这个对象可以通过this.state属性读取},// 输入框改变事件handleChange: function(event) {/*** 设置状态* 每次触发DOM事件时会产生一个事件对象（也称event对象）* event.target代表当前触发事件的元素*/this.setState({ value: event.target.value });},// 渲染render: function() {var value = this.state.value;return (<div><input type="text" value={value} onChange={this.handleChange} /><h4>{value}</h4></div>);}});// 创建虚拟DOMReactDOM.render(<HelloMessage />,document.getElementById('example'));</script></body>
</html>

上面的代码将渲染出一个值为 Hello World 的 input 元素，并通过 onChange 事件响应更新用户输入的值。

实例 2

在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。

你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>react表单与事件</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">/*** 创建 Content 组件* this.props 接收子元素暴露出去的属性的属性值*/var Content = React.createClass({render: function() {return (<div><input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /><h4>{this.props.myDataProp}</h4></div>);}});// 创建 HelloMessage 组件var HelloMessage = React.createClass({// 定义初始状态getInitialState: function() {return {value: 'Hello World'}; // 这个对象可以通过this.state读取},// 子组件状态更新事件handleChange: function(event) {// 设置状态this.setState({ value: event.target.value });},/*** 渲染* return 的 () 可以省略,但是省略后不能换行*/render: function() {var value = this.state.value;return <div><Content myDataProp={value} updateStateProp={this.handleChange}></Content></div>}});// 创建虚拟DOMReactDOM.render(<HelloMessage />,document.getElementById('example'));</script></body>
</html>

React 事件

以下实例演示通过 onClick 事件来修改数据：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>onClick事件</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">// 创建 HelloMessage 组件var HelloMessage = React.createClass({// 定义初始状态getInitialState: function() {return {value: 'Hello World'}; // 这个对象可以通过this.state读取},// 子组件状态更新事件handleChange: function(event) {// 设置状态this.setState({ value: '百度' });},/*** 渲染* return 的 () 可以省略,但是省略后不能换行*/render: function() {var value = this.state.value;return <div><button onClick={this.handleChange}>点我</button><h4>{value}</h4></div>}});// 创建虚拟DOMReactDOM.render(<HelloMessage />,document.getElementById('example'));</script></body>
</html>

当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。实例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>react表单与事件</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">// 创建 Content 组件var Content = React.createClass({render: function() {return <div><button onClick={this.props.updateStateProp}>点我</button><h4>{this.props.myDataProp}</h4></div>}});// 创建 HelloMessage 组件var HelloMessage = React.createClass({// 定义初始状态getInitialState: function() {return {value: 'Hello World'}; // 这个对象可以通过this.state读取},handleChange: function(event) {// 设置状态this.setState({ value: '百度' });},// 渲染render: function() {var value = this.state.value;return <div><Content myDataProp={value} updateStateProp={this.handleChange}></Content></div>}});// 创建虚拟DOMReactDOM.render(<HelloMessage />,document.getElementById('example'));</script></body>
</html>

React 表单与事件相关推荐

React 表单源码阅读笔记
1 概念 1.1 什么是表单实际上广义上的表单并不是特别好界定,维基上讲表单是一系列带有空格的文档,用于输写或选择.更具体的,在网页中表单主要负责数据采集的功能,我们下文中所提到的表单都指后者.如下 ...
vue监控表单输入事件，正则验证手机号，邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...
JavaScript基础（九）form表单、事件、3D
form表单.事件.3D form表单 form表单操作 event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡 javascript实现 jQuery实现 3D 3 ...
使用Formik轻松开发更高质量的React表单（一）入门
前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的,看到作者的高度肯定后我立即转到github上,正如许多朋友所关注的,Formik的星数达8282,这个数字在git ...
React表单 (受控组件,非受控组件)
react中的表单不同于基本的dom操作他主要可分为受控组件和非受控组件这里我们先创建一个react项目这里我们就直接将代码写在App.jsx里了 App.jsx参考代码如下 import ' ...
react表单双向绑定处理
react中处理表单双向绑定的方法: constructor() {super()this.state = {commentData: [{name: '冯昕',text: '说自己是大帅哥',id: ...
react 表单受控组件
一.受控组件受控组件: 在React中,表单元素(input select textarea等) 被React以setState的方式驱动视图变化的元素称为受控函数.每个受控组件都维护自己的stat ...
使用Formik轻松开发更高质量的React表单（二）使用指南
一个基本的例子设想你要开发一个可以编辑用户数据的表单.不过,你的用户API端使用了具有类似下面的嵌套对象表达: {id: string,email: string,social: {facebook ...
SharePoint 使用脚本为表单绑定事件
在SharePoint的使用过程中,我们经常需要为表单页面做一些特殊处理,比如说新建页面的时候有多选项的字段,但是只能选择指定数量的选项,尤其在新闻列表或者调查列表等特殊场景中,广泛使用. 下面,我们 ...

React 表单与事件

一个简单的实例

实例 2

React 事件

React 表单与事件相关推荐

最新文章

热门文章