入力ボックスに入力したり問題をクリックしたりする問題がある[反応する]

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'で印刷されます。

これは私のDOMです。 ！[DOMの画像]： また、ツールは小道具が読み取り専用であると言います。

Answer 1

私のアプリをゼロから元に戻してビルドしたところ、問題はCSSにあることが判明しました。私は奇妙なことを見つける。レンダリングされたdivは、メインのdivに入れ子になっていました。このmain divには、ヘッダの内容がその上に来るように、z-indexスタイルが-1です。私はヘッダーの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;** 
}