在我的输入框中输入或单击内容时遇到问题[反应]答案

【问题标题】：Having issues typing into my input box or clicking on things[React]在我的输入框中输入或单击内容时遇到问题[反应]
【发布时间】：2017-12-24 15:32:30
【问题描述】：

我有点困惑，为什么我的输入框被冻结并且我的标签上没有点击。我环顾四周寻找答案并阅读了一个说我需要设置值和回调的答案。照做了，还是不行。这是我的代码。

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;

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

查看 React 开发工具，这是我的 DOM。 ![DOM 的图像]：https://ibb.co/mQEaN6 工具还说道具是只读的。

【问题讨论】：

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

标签： javascript reactjs

【解决方案1】：

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

之前的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;**
}

【讨论】：