Javascript Div onClick函数不'；单击React应用程序时无法工作

我有一个函数，当相应地更改项目数量时，会创建2个div（例如，如果我们选择5台电视，我们将获得5个div来选择选项）。它们的作用是做出选择——每台电视只能选择两个选项中的一个，所以当我们点击其中一个时，它应该改变它的边框和背景色

现在我想为这些div创建一个动态样式：当我们单击它们时，它们应该得到一个新类（tv选项处于活动状态）来更改它们的样式

为此，我使用了2个数组（classesLess和classesOver），每次单击其中一个div时，如果一个类已经应用于相反的选项，我们应该删除它，并将该类推送到目标元素，因此只有一个选项将具有活动的tv选项类

但是，当我单击一个div时，我什么也得不到——当我在浏览器中打开文档并检查元素时，元素甚至不会在单击时接收新类——然而，当我控制台记录应用于元素的class变量时，它应该是“少电视选项活动”或“电视选项活动”。我应用了join方法来删除逗号

我检查了导入的css文件的名称，它是正常的，所以问题不存在，我还应用了一些规则，以确保问题不存在，并且在它不是动态的（我的意思是不需要单击）时它工作正常

因此，我列出的引起麻烦的原因似乎不起作用。 我还尝试重新组织代码，以避免在render return中调用函数——将映射直接放入render return，但这也不起作用

谁能给我一个提示为什么会这样

这是我的密码

import React from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import './TVMonting.css'

import PageTitle from '../../PageTitle/PageTitle'

class TVMontingRender extends React.Component {
    state = {
        tvData: {
            tvs: 1,
            under: 0, 
            over: 0,
        },
    }


    render() {
        let classesLess = ['less']
        let classesOver = ['over']

        const tvHandlers = {
            tvs: {
                decrease: () => {
                    if (this.state.tvData.tvs > 1) {
                        let tvData = {
                            ...this.state.tvData,
                        }
                        tvData.tvs -= 1

                        this.setState({ tvData })
                    }
                },
                increase: () => {
                    if (this.state.tvData.tvs < 5) {
                        let tvData = {
                            ...this.state.tvData,
                        }

                        tvData.tvs += 1
                        this.setState({ tvData })
                    }
                },
            },
        }

        const createDivs = () => {
            const divsNumber = this.state.tvData.tvs

            let divsArray = []
            for (let i = 0; i < divsNumber; i++) {
                divsArray.push(i)
            }

            return divsArray.map((i) => {
                return (
                    <React.Fragment key={i}>
                        <div
                            className={classesLess.join(
                                ' '
                            )}
                            onClick={() => {
                                const idx = classesOver.indexOf(
                                    'tv-option-active'
                                )
                                if (idx !== -1) {
                                    classesLess.splice(
                                        idx,
                                        1
                                    )
                                }
                                classesLess.push(
                                    'tv-option-active'
                                )
                            }}
                        >
                            Under 65
                        </div>
                        <div
                            className={classesOver.join(
                                ' '
                            )}
                            onClick={() => {
                                const idx = classesLess.indexOf(
                                    'tv-option-active'
                                )
                                if (idx !== -1) {
                                    classesOver.splice(
                                        idx,
                                        1
                                    )
                                }

                                classesOver.push(
                                    'tv-option-active'
                                )

                                // classesOver.join(' ')
                            }}
                        >
                            Over 65
                        </div>
                    </React.Fragment>
                )
            })
        }

        return (
            <div>

                <button onClick={tvHandlers.tvs.decrease}>
                    -
                </button>

                {this.state.tvData.tvs === 1 ? (
                    <h1> {this.state.tvData.tvs} TV </h1>
                ) : (
                    <h1> {this.state.tvData.tvs} TVs </h1>
                )}

                <button onClick={tvHandlers.tvs.increase}>
                    +
                </button>

                {createDivs()}

             </div>
        )
    }
}

export default withRouter(TVMontingRender)

从“React”导入React
从“react router dom”导入{NavLink，withRouter}
导入“./TVMonting.css”
从“../../PageTitle/PageTitle”导入PageTitle
类TVMontingRender扩展了React.Component{
状态={
电视数据：{
电视:1,，
低于：0，
超过:0,，
},
}
render（）{
让classesLess=['less']
让classesOver=['over']
常量tvHandlers={
电视：{
减少：（）=>{
如果（this.state.tvData.tvs>1）{
设tvData={
…this.state.tvData，
}
tvData.tvs-=1
this.setState（{tvData}）
}
},
增加：（）=>{
如果（this.state.tvData.tvs<5）{
设tvData={
…this.state.tvData，
}
tvData.tvs+=1
this.setState（{tvData}）
}
},
},
}
const createDivs=（）=>{
const divsNumber=this.state.tvData.tvs
让divsArray=[]
for（设i=0；i{
返回(
{
const idx=classesOver.indexOf(
“电视选项处于活动状态”
)
如果（idx！=-1）{
无类拼接(
idx，
1.
)
}
无类推送(
“电视选项处于活动状态”
)
}}
>
65岁以下
{
const idx=classesLess.indexOf(
“电视选项处于活动状态”
)
如果（idx！=-1）{
classesOver.splice(
idx，
1.
)
}
过推(
“电视选项处于活动状态”
)
//classesOver.join（“”）
}}
>
65岁以上
)
})
}
返回(
-
{this.state.tvData.tvs==1(
{this.state.tvData.tvs}TV
) : (
{this.state.tvData.tvs}tvs
)}
+
{createDivs（）}
)
}
}
使用路由器导出默认值（TVMontingRender）

CSS文件非常简单-它只是添加了一个边框

---

另外，我知道，当我点击其中一个div时，使用这种架构，所有div都将获得tv option active类，但现在我只想确保这种架构能够工作——因为我在React组件方面相对较新，如果你改变一个变量，它们的生命周期不会被触发。为此，您需要一个状态，用于存储已处理的数据

在本例中，您需要一些状态来说明哪个div具有活动类，

在

下或

在

上。还可以将每个渲染的

Tv

抽象为另一个类组件。通过这种方式，您可以实现控制自己的类的独立元素，而不是更改所有其他元素

为此，我创建了一个

Tv

类，简化了一些

class Tv extends React.Component {

  state = {
    activeGroup: null 
  }

  // this will update which group is active
  changeActiveGroup = (activeGroup) => this.setState({activeGroup})

  // activeClass will return 'tv-option-active' if that group is active
  activeClass = (group) => (group === this.state.activeGroup ? 'tv-option-active' : '')

  render () {
    return (
      <React.Fragment>
        <div
          className={`less ${ activeClass('under') }`}
          onClick={() => changeActiveGroup('under')}
        >
            Under 65
        </div>
        <div
          className={`over ${ activeClass('over') }`}
          onClick={() => changeActiveGroup('over')}
        >
            Over 65
        </div>
      </React.Fragment>
    )
  }
}

class TVMontingRender extends React.Component {
    state = {
        tvData: {
            tvs: 1,
            under: 0, 
            over: 0,
        }
    }

    decreaseTvs = () => {
      if (this.state.tvData.tvs > 1) {
          let tvData = {
              ...this.state.tvData,
          }
          tvData.tvs -= 1

          this.setState({ tvData })
      }
    }

  increaseTvs = () => {
    if (this.state.tvData.tvs < 5) {
        let tvData = {
            ...this.state.tvData,
        }

        tvData.tvs += 1
        this.setState({ tvData })
    }
  }

  createDivs = () => {
    const divsNumber = this.state.tvData.tvs

    let divsArray = []
    for (let i = 0; i < divsNumber; i++) {
        divsArray.push(i)
    }
   
    // it would be better that key would have an unique generated id (you could use uuid lib for that) 
    return divsArray.map((i) => <Tv key={i} />)
  } 

    render() {

        return (
            <div>

                <button onClick={this.decreaseTvs}>
                    -
                </button>

                {this.state.tvData.tvs === 1 ? (
                    <h1> {this.state.tvData.tvs} TV </h1>
                ) : (
                    <h1> {this.state.tvData.tvs} TVs </h1>
                )}

                <button onClick={this.increaseTvs}>
                    +
                </button>

                {this.createDivs()}

             </div>
        )
    }
}