react中通过dom元素属性传递和获取参数的方法

react中通过dom元素属性获取参数的方法

我们在平时开发中遇到一个列表展示很多内容，然后点击列表中的某一项进行操作时需要获取当前项数据的参数，一般来说都是使用事件函数直接传参的方式进行获取，今天记录另一种通过dom元素自身属性获取参数的方式。

1、通过事件函数传参

首先来看下通过事件回调函数进行的传参方式，完整代码如下：

import React from 'react'

const dataList = [
    {
        id: 1,
        name: '小明',
        age: 18,
        sex: '男'
    },
    {
        id: 2,
        name: '小红',
        age: 19,
        sex: '女'
    },
    {
        id: 3,
        name: '小花',
        age: 17,
        sex: '女'
    },
    {
        id: 4,
        name: '小刚',
        age: 16,
        sex: '男'
    }
]

export default function DomParames() {

    const handleClick = (name, age) => {
        console.log(`我的名字${name}，年龄${age}`)
    }

    return (
        <ul>
            {dataList.map(item => {
            // 列表循环后，将数组中的每一项传递到事件回调函数中
            return <li key={item.id} onClick={() => handleClick(item.name, item.age)}>
                {`${item.id}-${item.name}`}
            </li>}
            )}
        </ul>
    )
}

上面代码就是将数组中的数据循环后，然后将当前项的数据传递到事件回调函数中。效果如下：

2、通过dom元素属性获取参数

现在通过在dom元素上的属性传递指定参数，然后再获取的传递的参数，代码如下：

import React from 'react'

const dataList = [
    {
        id: 1,
        name: '小明',
        age: 18,
        sex: '男'
    },
    {
        id: 2,
        name: '小红',
        age: 19,
        sex: '女'
    },
    {
        id: 3,
        name: '小花',
        age: 17,
        sex: '女'
    },
    {
        id: 4,
        name: '小刚',
        age: 16,
        sex: '男'
    }
]

export default function DomParames() {

    const handleClick = e => {
        const { dataset: {age, name} } = e.target
        console.log(`我的名字${name}，年龄${age}`)
    }

    return (
        <ul>
            {dataList.map(item => {
            // 列表循环后，将数组中的每一项数据传递到自定义的属性中
            return(
            <li
                key={item.id}
                data-id={item.id}
                data-name={item.name}
                data-age={item.age}
                onClick={handleClick}>
                {`${item.id}-${item.name}`}
            </li>)}
            )}
        </ul>
    )
}

上面代码采用dom元素自动data-xxx属性的方式来传递参数，通过获取当前target元素dataset属性来获取传递的参数，效果如下：