Question

我有一个组件，可以使用数组中的信息创建按钮，当用户单击按钮时，我要将信息从该数组传递给函数，但是我得到的是“ [Object Object]”，该怎么办我通过数组并访问函数中的元素？

功能：

handleClick (e) {
        const { value } = e.currentTarget
        console.log(value)
    };

组件渲染：

render () {
        return (
            <div>
                {this.state.enrollments.map(item => (
                    <div key={item.id}>
                        <button value={item} onClick={this.handleClick}>
                            {item.enrollment}
                        </button>
                     </div>
                ))}
            </div>
        )
    }

传递给地图的数组：

0: {id: 1, evaluation_flag: false, enrollment: "2019.1", user_id: 2}
1: {id: 2, evaluation_flag: false, enrollment: "2019.2", user_id: 2}

在handleClick函数中，我要访问值，键入：value.id或value.user_id。

Answer 1

如果需要，您可以创建一个箭头函数，您的代码将变为：

<button value={item} onClick={(e) => this.handleClick(e, item)}>
  {item.enrollment}
</button>

然后显然地修改handleClick函数以接受第二个参数item。

基本上，(e) => handleClick(e, item)所做的是就地创建以下功能：

function (e) {
  return handleClick(e, item);
}

React.js-如何将数组传递给函数？

1 个答案: