一、React 事件对象
在出发DOM上的某个事件,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
二、React 获取dom节点
2.1第一种获取方式
import React, { Component } from "react";
import "../assets/css/index.css";
class Home extends Component {
//固定写法
constructor(props) {
super(props);
this.state = {
msg:"我是一个home组件",
};
}
run = (event)=> {
// alert(this.state.msg)
// console.log(event)
//alert(event.target);//获取执行事件的dom节点
event.target.style.background = 'red';
//获取dom的属性
console.log(event.target.getAttribute('aid'))
}
render() {
return (
<div>
<h2>{this.state.msg}</h2>
{/* 事件对象 */}
<h2>事件对象演示</h2>
<button aid="123" onClick={this.run}>事件对象</button>
<br/> <hr/>
</div>
);
}
}
export default Home;
三、获取input框的值–方法一
import React, { Component } from "react";
import "../assets/css/index.css";
class Home extends Component {
//固定写法
constructor(props) {
super(props);
this.state = {
username:"",
};
}
inputChange = (e) => {
// console.log("1111")
//获取表单的值
// console.log(e.target.value);
this.setState({
username:e.target.value
});
}
getInput = ()=>{
console.log(this.state.username)
}
render() {
return (
<div>
<h2>表单事件</h2>
{/*
获取表单的值:
1.监听表单的改变事件 onChange
2.在改变的事件里面获取表单输入的值 e.target.value
3.把表单输入的值复制给 username this.setState({});
4.点击按钮的时候获取 state里面的username this.state.username
*/}
<input onChange={this.inputChange}/>
<button onClick={this.getInput}>
获取input的值
</button>
</div>
);
}
}
export default Home;
四、获取input框的值–方法二
import React, { Component } from "react";
class List extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
};
}
inputChange = (e) => {
/*
获取dom节点
1.给元素定义ref属性
<input ref="username" />
2.通过this.refs.username 获取dom节点
*/
let val = this.refs.nameNode.value;
this.setState({
username: val,
});
};
getInput = () => {
console.log(this.state.username);
};
render() {
return (
<div>
<h2>表单事件</h2>
{/*
获取表单的值:
1.监听表单的改变事件 onChange
2.在改变的事件里面获取表单输入的值 ref获取
3.把表单输入的值复制给 username this.setState({});
4.点击按钮的时候获取 state里面的username this.state.username
*/}
<input ref='nameNode' onChange={this.inputChange} />
<button onClick={this.getInput}>获取input的值</button>
</div>
);
}
}
export default List;
关于报错:
在React 16.3版本后,使用React.createRef()
来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性将能拿到dom节点或组件的实例。
例子:
class Counter extends Component {
constructor() {
super()
this.state ={sum:0,number:0}
this.myRef = React.createRef();
}
change = () =>{
this.setState({...this.state,sum: Number(this.textInput.value) + Number(this.myRef.current.value)})
}
componentDidMount(){
console.log(this.myRef.current.value);
}
render() {
return (
<div onChange ={this.change} >
<input type="text" ref={(input)=>{this.textInput=input}} />+
<input type ="text" ref={this.myRef} /> = {this.state.sum}
</div>
)
}
}
修改后的代码
import React, { Component } from "react";
class List extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
};
this.myRef = React.createRef();
}
inputChange = (e) => {
let val = this.myRef.current.value;
this.setState({
username: val,
});
};
getInput = () => {
console.log(this.state.username);
};
render() {
return (
<div>
<h2>表单事件</h2>
<input ref={this.myRef} onChange={this.inputChange} />
<button onClick={this.getInput}>获取input的值</button>
</div>
);
}
}
export default List;
五、双向数据绑定
import React from "react";
class Todolist extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "111",
};
}
// view改变反过来影响model
inputChange = (e) => {
this.setState({
username: e.target.value,
});
};
//model改变影响view
setUsername = () => {
this.setState({
username:'李四'
});
};
render() {
return (
<div>
<h2>双向数据绑定</h2>
{/* model改变影响view view改变反过来影响model */}
<p>{this.state.username}</p>
<input value={this.state.username} onChange={this.inputChange} />
<button onClick={this.setUsername}>改变username的值</button>
</div>
);
}
}
export default Todolist;