javascript - 如何在 React JS 中启用/禁用数组中的元素?
问题描述
我正在尝试创建一个组件,其中我有一堆来自数组的框,当单独单击每个框时,可以将其打开和关闭。
目前,只能“打开”数组中的单个项目(由变为绿色的项目显示),但是,我希望能够单独打开/关闭每个项目。
与一个元素交互不应影响其他任何元素。
我如何实现这一目标?
我的点击事件:
handleOnClick = (val, i) => {
this.setState({active: i}, () => console.log(this.state.active, 'active'))
}
渲染盒子:
renderBoxes = () => {
const options = this.state.needsOptions.map((val, i) => {
return (
<button
key={i}
style={{...style.box, background: i === this.state.active ? 'green' : ''}}
onClick={() => this.handleOnClick(val, i)}
>
{val}
</button>
)
})
return options
}
这是一个Codepen
解决方案
我要做的是创建一个Box
具有自己活动状态的组件,并将其传递给renderBoxes
. 这样做的好处是每个 Box 组件都有自己独立于父级的状态。这样,您可以将多个组件作为活动组件。
所以...
class Box extends React.Component {
constructor(props){
super(props)
this.state={
active: false
}
}
clickHandler = () => {
this.setState({active: !this.state.active})
}
render(){
const { key, children }= this.props
return (
<button
key={key}
style={{...style.box, background: this.state.active ? 'green' : ''}}
onClick={() => this.clickHandler()}
>
{children}
</button>
)
}
}
然后让 renderBoxes...
renderBoxes = () => {
const options = this.state.needsOptions.map((val, i) => {
return (
<Box
key={i}
>
{val}
</Box>
)
})
return options
}
这是我从你那里得到的代码笔。
推荐阅读
- cron - Why does Successful execution of Cron job stops further appending of log onto a file
- jmeter - Using jmeter to place messages on google-cloud pubsub
- c# - Fortify: Null Dereference
- php - .htaccess - 递归地将斜杠映射到下划线(内部重定向)
- anylogic - Looking for an example to execute milkrun in last mile
- python - How to get phonemes from Google Cloud API Text-to-Speech
- html - 引导程序 4 中的表格列宽
- sublimetext3 - Sublime text3: /bin/sh: sac: command not found
- c++ - poll() method not working in Linux but working in Mac
- python - 关于python中定义while循环的空列表的问题