想要获取我点击的li里面的数据怎么搞呢,现在就要给这个元素添加点击事件了,react中有自己的语法规范,添加点击事件是这样的:onClick={ this.xxxxx }
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五']
//在这里对this指向进行赋值,就不用再定义方法中写bind(this)了,比较推荐,也可以在jsx中加入`bind(this)`,就能获取到this了
this.btnClick = this.btnClick.bind(this)
//点击事件
btnClick(){
//这里面的this其实指向的是button按钮,可以改变this的指向,在button的点击事件中:
//箭头函数用法
btnClick = () => {
//do something
render() {
return (
<div className="main-container">
{/* 循环数据 */}
this.state.list.map((item,index) => {
// 传入index
return <li key={index} onClick={this.btnClick(index)}>{item}</li>
//或者,这里bind的作用是修改this指向,让函数内部的this指向bind参数中的第一个参数
return <li key={index} onClick={this.btnClick.bind(this,index)}>{item}</li>
//更推荐使用箭头函数
return <li key={index} onClick={() => this.btnClick(index)}>{item}</li>
export default TodoList
js中bind、call、apply
都能改变this指向,区别就是bind不会立即调用,而call、apply会立即调用前面的那个函数
bind的第一个参数用来修改this指向,后面所有的参数都会用来当作调用前面函数时候的参数传递进去
<input type="button" value="点我一下" onClick={this.clickMe.bind(this,'我的天','哈哈哈','你是谁')} />
clickMe(arg1,arg2){
console.log(arg1,arg2)
1、循环假设现在我们有一个这样的数组:list: ['张三','李四','王五'],那么怎么在页面上渲染呢,很简单,在react中可以用数组的map方法import React from 'react'class TodoList extends React.Component { constructor(props){ super(props) this.state = { list: ['张三','李四','王五'], .
1. 列表循环数据化
目前Child.js组件中的<li>标签内的数据是静态的,也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环在页面上。
首先,在上一节中。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下:
// 省略上面部分无关代码
constructor(props) {
super(props)
this.state = {
input.