React 学习笔记常见操作
循环#
- 使用
map循环来展示列表数据
import React, {Component} from 'react';
class App extends Component {
state = {
numList: [
{
id: 1,
value: 111
},
{
id: 2,
value: 222
}
]
}
render() {
const numItem = this.state.numList.map(item => {
return (<li key={item.id}>{item.value}</li>)
})
return (
<div>
<ul>
{ numItem }
</ul>
</div>
);
}
}
export default App;
ref#
- 使用
ref可以获取到对应的dom节点 - 如果给组件设置 ref 属性，那么最后获取到的是组件对象
- 方法 1
import React, {Component, createRef} from 'react';
class App extends Component {
passwordDom = createRef()
render() {
return (
<div>
{/*需要 this.passwordDom.current 才能拿到标签, current 是固定的*/}
<br/>
<input ref={this.passwordDom} type="text"/>
<button onClick={() => {
console.log(this.passwordDom, this.passwordDom.current.value);
}}>add2</button>
</div>
);
}
}
export default App;- 方法 2 (要被遗弃)
import React, {Component} from 'react';
class App extends Component {
render() {
return (
<div>
<input ref='usernameDom' type="text"/>
<button onClick={() => {
console.log(this.refs.usernameDom, this.refs.usernameDom.value);
}}>add1</button>
</div>
);
}
}
export default App;
- 注意:
- 如果想要拿到输入框中的值，并且不需要传递参数的时候，可以不使用
ref, 因为可以给input输入框中的onInput属性绑定方法来监听输入的内容，此时如果不传参数的话，该监听方法会自动传入一个参数表示input输入框对象
- 如果想要拿到输入框中的值，并且不需要传递参数的时候，可以不使用
import React, { Component } from 'react';
class App extends Component {
handlerInput = (event) => {
// 获取输入框的内容
console.log(event.target.value)
}
render() {
return (
<div>
<input onInput="handlerInput" type="text"/>
</div>
);
}
}
export default App;
关于 LearnKu
粤公网安备 44030502004330号