时间戳

首页 > 解决方案 > 试图弄清楚将其从组件转换为 ReactJS 中的函数，但我被卡住了

reactjs - 试图弄清楚将其从组件转换为 ReactJS 中的函数，但我被卡住了

问题描述

我需要底部代码才能使用顶部。上面的代码本来是一个组件，但我把它改成了一个函数，但我不知道如何处理下面的代码。

const listLocations = locations.map((place, id) => {
console.log(place.name)
return (
<p key={id} onClick={showLocation}>{place.name}</p>
)
})

const showLocation = (place) => {
if (this.state[place.id] === "hidden") {
this.setState(this.defaultState)
this.setState({ [place.id]: "", currentLocation: place })
} else {
this.setState({[place.id]: "hidden", currentLocation: {}})
}
}

标签： reactjs

解决方案

const listLocations = locations.map((place, id) => {
    return (
        <p key={id} onClick={() => showLocation(place)}>{place.name}</p>
    )
})

const showLocation = (place) => {
    if (this.state[place.id] === "hidden") {
        this.setState(this.defaultState)
        this.setState({ [place.id]: "", currentLocation: place })
    } else {
        this.setState({[place.id]: "hidden", currentLocation: {}})
    }
}

您的 onClick 被作为 lambda 传递，没有任何关于被点击位置的信息。我将其更改为从上下文中获取该信息的 lambda。试试看，让我们知道它是否有效。

请记住格式化/缩进您的代码以使其更具可读性:)

推荐阅读