Question

我有一个提供潜在交易选项的地图函数，但是我需要在单击id时将其传递给一个函数（当前代码不记录任何内容）。下面的代码：

<div>{
    this.state.yourDrams.map((dram) =>
        <OfferTile
            key={dram.name}
            img={dram.image}
            name={dram.name}
            size={dram.size}
            onClick={ () => console.log(dram.id) }
        />
    )
}</div>

我要去哪里错了？

提前谢谢！

编辑：

这是offerTile组件

import React, { Component } from 'react'
import "./offerTile.css"

export default class offerTile extends Component {

    render() {
        return (
            <div className="offer">
                {this.props.img === undefined ? null : <img alt="offer" width="120" src={this.props.img}/>}
                <span><h3>{this.props.name}</h3> - <em>{this.props.dist}</em> {this.props.abv !== undefined ? <p>{this.props.abv}%</p> : null}</span>
                <p>{this.props.desc}</p>
                <p><strong>{this.props.size}</strong></p>
            </div>
        )
    }
}

Answer 1

您看起来很棒。我认为需要进行一些修改。

<div>{
    this.state.yourDrams.map((dram) =>
        <OfferTile
            key={dram.name}
            img={dram.image}
            name={dram.name}
            size={dram.size}
            onHandleClick={ () => console.log(dram.id) }
        />
    )
}</div>

import React, { Component } from 'react'
import "./offerTile.css"

export default class offerTile extends Component {

    render() {
        return (
            <div className="offer" onClick={this.props.onHandleClick}>
                {this.props.img === undefined ? null : <img alt="offer" width="120" src={this.props.img}/>}
                <span><h3>{this.props.name}</h3> - <em>{this.props.dist}</em> {this.props.abv !== undefined ? <p>{this.props.abv}%</p> : null}</span>
                <p>{this.props.desc}</p>
                <p><strong>{this.props.size}</strong></p>
            </div>
        )
    }
}

您应该处理offerTile组件中的onHandleClick。最佳做法是不要将内置事件函数用作自己的道具名称。

如何在函数调用中使用映射值？

1 个答案: