Javascript 在输入框中键入内容或单击内容时出现问题[React]

我有点困惑，为什么我的输入框被冻结了，点击在我的标签上不起作用。我环顾四周寻找答案，看到一个答案说我需要设置值和回调。做了那件事，还是没有成功。这是我的密码

import React, { Component } from 'react'

class ItemsNew extends Component{
    constructor(props){
        super(props)
        this.state = {
            name: 'a',
            price: '',
            location: '',
            used: '',
            descriptipn: '',
            imgUrl: '',
            shippingCost: ''
        }
        console.log(this.state)
    }

    handleOnChange = (event) => {
        debugger
        this.setState({
            name: event.target.value 
        })
    }

    handleOnClick = (event) => {
        debugger
    }

    render(){
        return  (
            <div>
                <label onClick={this.handleOnClick}>name</label>
                <input id='name' type='text' onChange={this.handleOnChange} value={this.state.name}/><br/>
            </div>
            )
    }
}

export default ItemsNew;

import React，{Component}来自“React”
类ItemsNew扩展组件{
建造师（道具）{
超级（道具）
此.state={
名称：‘a’，
价格：''，
位置：“”，
已使用：“”，
说明：''，
图：''，
装运成本：“”
}
console.log（this.state）
}
handleOnChange=（事件）=>{
调试器
这是我的国家({
名称：event.target.value
})
}
handleOnClick=（事件）=>{
调试器
}
render（）{
返回(
名称


)
}
}
导出默认项新建；

我的console.log点击并打印出这个.state。但是，我的事件处理程序中没有一个被调试器命中。在第一次加载页面时，输入框会打印出“a”

查看React开发工具，这是我的DOM。 ![DOM图像]：

---

还有工具说道具是只读的。

在从头开始构建我的应用程序后，我发现问题出在CSS中。我觉得很奇怪。渲染出的div嵌套在z-index样式为-1的主div中，因此我的标题内容位于其顶部。我改变了标题的z索引，给了标题一个相对的位置，现在一切都正常了

以前的css代码：

.main{
    width: 600px;
    height: 650px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 7px;
    border-style: solid;
    border-color: grey;
    box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
    transform: translateY(-12%);
    overflow-y: auto;
    **z-index: -1;**
    background: lightblue;
}

.app-title{
    text-align: center;
    color: teal;
    margin-top: 38px;
}

新CSS代码：

.main{
  width: 600px;
  height: 650px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 7px;
  border-style: solid;
  border-color: grey;
  box-shadow: 10px 13px 15px 0 rgba(0,0,0,0.3);
  transform: translateY(-12%);
  overflow-y: auto;
  background: lightblue;
}

.app-title{
  text-align: center;
  color: teal;
  margin-top: 38px;
  **position: relative;**
  **z-index: 1;**
}

---

你的代码对我来说似乎很好，也许问题不在你的代码中，而是在其他地方。是的，我构建了一个简单的react应用程序，没有其他依赖项，没有路由器，输入没有冻结。但就我的另一个应用程序而言，我有各种各样的功能。我想现在得深入挖掘了。很高兴你问这个问题！帮助我修复代码。还通过增加输入标记的父元素的zIndex来修复它。（必须是父标记。在实际输入标记上增加zIndex不起作用）。