2019-01-02 18:21:17 Hreticent 阅读数 172
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57548 人正在学习 去看看 李宁

主要内容:

键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

 

获取执行事件的dom节点以及DOM属性:

run=(event)=>{

    console.dir(event)
    /*获取执行事件的dom节点   [object HTMLButtonElement]*/
        
    event.target.style.background='red';

    //获取dom的属性
    alert(event.target.getAttribute('aid'))
}

 <button aid="123" onClick={this.run}>事件对象</button>

表单事件:

分析思路:

1、监听表单的改变事件 ------------onChange

2、在改变的事件里面获取表单输入的值 -----------事件对象

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取 state里面的username this.state.username

 

inputChange=(e)=>{
  console.log('测试成功');
  // 获取表单里面的值
  console.log(e.target.value);
  this.setState({
      username:e.target.value
  })                         
}

getInput=()=>{
   alert(this.state.username);
}

<input onChange={this.inputChange} />
<button onClick={this.getInput}>获取input的值</button>

给元素定义ref属性,通过this.refs.username 获取dom节点

inputChange=()=>{
        
    let val=this.refs.username.value;
    console.log(val)
    this.setState({
        username:val
    })
}

getInput=()=>{
    alert(this.state.username)
}

 <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>

键盘事件:

    // 键盘事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }

    <input onKeyUp={this.inputKeyUp}/>
    <br />
    <input onKeyDown={this.inputonKeyDown}/>

 

2018-11-16 14:03:05 jrrfgj 阅读数 249
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57548 人正在学习 去看看 李宁

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

1、问题背景

     利用React获取DOM节点,需要利用ref属性


2、实现源码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>React获取DOM节点</title>  <script type="text/javascript" src="../js/react.js" ></script>  <script type="text/javascript" src="../js/react-dom.js" ></script>  <script type="text/javascript" src="../js/browser.min.js" ></script>  <script type="text/babel">   var Cat = React.createClass({    cutClick:function(){     this.refs.person.focus();    },    render:function(){     return (      <div>       <input type="text" ref="person" />       <input type="button" value="查询" onclick="{this.cutClick}" />      </div>     )    }   });      ReactDOM.render(    <Cat />,    document.getElementById("catQuery")   );  </script> </head> <body>  <div id="catQuery"></div> </body></html>

3、实现结果

    

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述
2019-11-07 10:53:54 u010132177 阅读数 30
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57548 人正在学习 去看看 李宁

接:https://www.cnblogs.com/chenxi188/p/11782349.html

事件对象 、键盘事件、 表单事件 、ref获取dom节点、React实现类似vue双向数据绑定

一、事件对象

**事件对象:**在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
新建Demo2.js输入如下(文件在[在src/components/]下)

1.获取目标节点,并改变其背景色

import React from 'react';

class Demo2 extends React.Component{
	constructor(props){
		super(props);

		this.state={
			msg:'hello'
		}
	}

	run=(event)=>{
		//打印出所有event事件函数
		//console.log(event);

		//获取目标节点(此处是button),并改变其背景色为blue
		alert(event.target);
		event.target.style.background='blue';
	}

	render(){
		return(
		<div>
		<h1>{this.state.msg}</h1>
		<button onClick={this.run}>输出所有事件对象</button>
		</div>
		)
	}
}
export default Demo2;

App.js内容如下:

import React from 'react';
import logo from './logo.svg';
import './App.css';
//import Demo from './components/Demo'
import Demo2 from './components/Demo2.js';

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Demo2 />

    </div>
  );
}

export default App;

效果:改变按钮的颜色为blue
在这里插入图片描述
点后
在这里插入图片描述

2.获取目标节点的属性值

通过事件函数获取目标节点的aid属性值:event.target.getAttribute(‘aid’)
Demo2.js内容:

import React from 'react';

class Demo2 extends React.Component{
	constructor(props){
		super(props);

		this.state={
			msg:'hello'
		}
	}

	run=(event)=>{
		//获取目标节点属性(button的aid='xxx')其中的xxxx
		alert(event.target.getAttribute('aid'))
	}

	render(){
		return(
		<div>
		<button aid='111111' onClick={this.run}>输出所有事件对象</button>
		</div>
		)
	}
}
export default Demo2;

App.js内容同上
结果:
在这里插入图片描述

3.表单事件(目标:通过按钮获取input输入的值)

方法1.通过onChange事件监听input值改变,运行对应函数(函数获取值用x.target.value)改变state值,再通过button的onClick事件监听点击,运行对应函数获取state值

1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 事件对象
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username

Demo2.js内容:

import React from 'react';

class Demo2 extends React.Component{
	constructor(props){
		super(props);

		this.state={
			msg:'hello',
			input_value:''
		}
	}

	//1.获取到input节点,并把值改变到state里的input_value
	chan_state=(e)=>{
		//a.在控制台输出获取到的input值
		console.log(e.target.value);

		//b.改变state的值
		this.setState({
			input_value:e.target.value
			});
	}

	//2.通过按键点击事件获取state的input_value值
	get_state=()=>{
		//弹出state的input_value值
		alert(this.state.input_value);
	}
	render(){
		return(
		<div>
	    {/*
	     1.首先用onChange监听input值改变的事件,然后调用chan_state自写函数,来改变state里的,input_value值;
	     2.再用button按钮的监听点击事件,然后去获取state内的input_value被改变后的值。从而实现获取input值功能
	   */}
		<input onChange={this.chan_state} />
		<button onClick={this.get_state}>事件对象</button>
		</div>
		)
	}
}
export default Demo2;

App.js内容不变
结果:
在这里插入图片描述
控制台的变化:
在这里插入图片描述

方法2.[同方法1]通过onChange事件监听input值改变,运行对应函数(函数获取值用ref)改变state值,再通过button的onClick事件监听点击,运行对应函数获取state值

1、监听表单的改变事件 : onChange
2、在改变的事件里面获取表单输入的值 : ref获取
注:DOM用ref=‘xxx’,函数获取时用 this.refs.userName.value
3、把表单输入的值赋值给username : this.setState({})
4、点击按钮的时候获取 state里面的username : this.state.username

Demo.js内容:

import React from 'react';

class Demo2 extends React.Component{
	constructor(props){
		super(props);

		this.state={
			userName:''
		}
	}

	//1.获取到input节点,并把值改变到state里的userName
	chan_state=()=>{
		// 【重点】通过refs获取到input的值【注意此处是refs】
		let um=this.refs.userName.value

		//a.在控制台输出获取到的input值
		console.log(um);

		//b.改变state的值
		this.setState({
			userName:um
			});
	}

	//2.通过按键点击事件获取state的userName值
	get_state=()=>{
		//弹出state的userName值
		alert(this.state.userName);
	}
	render(){
		return(
		<div>
	    {/*
	     1.首先用onChange监听input值改变的事件,然后调用chan_state自写函数,来改变state里的,name值。为了方便对应函数获取input值此处加一属性ref='name';
	     2.再用button按钮的监听点击事件,然后去获取state内的input_value被改变后的值。从而实现获取input值功能
	   */}
		<input ref='userName' onChange={this.chan_state} />
		<button onClick={this.get_state}>事件对象</button>
		</div>
		)
	}
}
export default Demo2;

App.js内容不变,刷新查看效果(与方法1相同):
在这里插入图片描述

4.表单事件(在input输入值后按回车,获取到输入内容)

1.通过input的监听键盘弹起(onKeyUp),运行指定自写函数,判断按下的是否是回车键(代码:13),是的话就通过x.target.value获取input值,弹出来

Demo3.js

import React from 'react';

class Demo3 extends React.Component{
	constructor(props){
		super(props);

		this.state={
			userName:''
		}
	}

	//键盘事件【获取按下键盘的代码:e.keyCode】
	run=(e)=>{
		console.log(e.keyCode);
		if (e.keyCode==13){
			//获取目标节点,并弹出其值
			alert(e.target.value);
		}
	}

	render(){
		return(
		<div>
	    {/*
	     1.监听函数onKeyUp() 或 onKeyDown() keypress 键盘弹起或按下都可
	   */}
		<input onKeyUp={this.run} />
		</div>
		)
	}
}
export default Demo3;

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
//import Demo from './components/Demo'
import Demo3 from './components/Demo3.js';

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <Demo3 />
    </div>
  );
}

export default App;

效果:
输入并按下回车后:
在这里插入图片描述
控制台显示:
在这里插入图片描述

5.双向数据绑定(改变input值,state对应值跟着改变,h1显示state的值跟着也改变)

双向数据绑定即:model改变影响View,view改变反过来影响model。
todolist.js内容:

import React from 'react';

class List extends React.Component{
	constructor(props){
		super(props);
		this.state={
			username:'jim rans'
		}
	}

	//input函数:数据双向绑定(model改变影响View,view改变反过来影响model)
	changevalue=(e)=>{
		this.setState({
			username:e.target.value
		})
	}
	
	//button函数:点击按钮改变state值,input,h1也跟着变
	setname=(e)=>{
		this.setState({
			username:'变身按钮传来的名字'
		})
	}

	render(){
		return(
			<div>
			{/*h1 input是view.input改变影响state,state又影响h1显示的内容*/}
			<h1>{this.state.username}</h1>
			<input value={this.state.username} onChange={this.changevalue} />
			<button onClick={this.setname} >改变</button>
			</div>
		);
	}
}
export default List;

App.js内容:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import List from './components/todolist.js'

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <List />
    </div>
  );
}
export default App;

效果:input里输入值,state会跟着改变,然后h1也跟着变
在这里插入图片描述
点按钮,传值改变state和h1,input:
在这里插入图片描述

2017-02-19 10:16:16 chenzhen200638 阅读数 5826
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57548 人正在学习 去看看 李宁

获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。

有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

var MyComponent = React.createClass({
   handleClick: function() {
     this.refs.myTextInput.focus();
   },
   render: function() {
     return (
     <div>
       <input type="text" ref="myTextInput" />
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
     );
   }
});

为了获取真是DOM节点,html元素必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。

2016-11-30 19:02:53 u010977147 阅读数 9287
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57548 人正在学习 去看看 李宁

获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性(查看 demo07 )。


var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、CopyScroll 等,完整的事件清单请查看官方文档

没有更多推荐了,返回首页