Question

我有点困惑，为什么我的输入框被冻结，点击不能在我的标签上工作。我环顾四周寻找答案并阅读一篇说我需要设置值和回调的内容。那是不是仍然没有。这是我的代码。

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 工具也说道具是只读的。

Answer 1

从头开始构建我的应用程序后，我发现问题出在CSS中。我觉得很奇怪。渲染出的div嵌套在一个主要的div中，它的z-index样式为-1，这样我的标题内容就在它的顶部。我改变了标题的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;**
}

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

1 个答案: