web-dev-qa-db-ja.com

画像onClickの失敗React

画像をレンダリングするReactコンポーネントがあります。その画像はonClickイベントをキャプチャする必要がありますが、キャプチャしません。この動作に理由はありません。コードは次のとおりです：

class MyComponent extends React.Component {

   imageClick = () => {
      console.log('Click!!!!');
   }       

   render () {
      return (
         <div>
            <img src='/myfolder/myimage.png' onClick={this.imageClick} />
         </div>
      );
   }
}

'Click !!!!'が表示されない理由がわかりません。画像をクリックすると、ブラウザコンソールにメッセージが表示されます。エラー、警告、何も返されません。 Linux Mintで実行しているChrome 62.0.3202を使用しています。

このコードを分離すると機能しますが、ボイラープレート内では機能しません。これは私の場合です。

ここで何が欠けていますか？

javascriptreactjseventsonclick
4
assembler
class MyComponent extends React.Component {      

     render () {
        const imageClick = () => {
          console.log('Click');
        } 
        return (
           <div>
              <img src={require('/myfolder/myimage.png') onClick={() => imageClick()} />
           </div>
        );
     }
  }
7
Lucas Charvolin

私は create-react-app で遊んでいて、ロゴに pointer-events cssスタイルをnoneに設定すると、すべてのクリックが無効になります。それがあなたのケースであるかどうかはわかりません。 imgでそのスタイルをオーバーライドしてみてください。

<img src='/myfolder/myimage.png' onClick={this.imageClick} style={{"pointer-events": "all"}} />
3
Val

私の場合はうまくいきます：

class MyComponent extends React.Component {

  imageClick = () => {
    console.log('Click!!!!');
  }       

  render () {
    return (
      <div>
        <img src='http://www.libpng.org/pub/png/img_png/obj_64x64.png' onClick={this.imageClick} />
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

また、コンポーネントにprop（url）が渡された同じバージョンと、画像をクリックしたときにトリガーされるstateの変更は、React：

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      clicked : false
    }
  }

  imageClick = () => {
    console.log('Click!!!!');
    this.setState({
      clicked: true
    })
  }       

  render () {
    return (
      <div>
        <img src={ this.props.url } onClick={this.imageClick} />
        {
          this.state.clicked &&
          <div>You clicked me!</div>
        }
      </div>
    );
  }
}

ReactDOM.render(<MyComponent url="http://www.libpng.org/pub/png/img_png/obj_64x64.png" />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

お役に立てれば！

1
Philippe Sultan

あなたのコードは問題なく見えます、そしてここに画像onClickを使った作業サンプルがあります。私のマシンでテストしましたChrome 16.0正常に動作しています。

<!DOCTYPE html>
<html>
  <head>
    <title>React Image Click</title>
    <meta charset="utf-8">
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx">
      class MyComponent extends React.Component {
          imageClick = () => {
            console.log('Click!!!!');
          }       

          render () {
            return (
               <div>
                  <img src='/myfolder/myimage.png' onClick={this.imageClick} />
               </div>
            );
          }
      }

      ReactDOM.render(
        <MyComponent />, 
        document.getElementById("app")
      );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
1
Elumalai Kaliyaperumal

これを行う別の方法を見つけました....ボタンタグ内に画像を配置し、そのボタンのスタイルを設定して画像のみを表示します。私のコードを見てください:-)

 <button style={{background:'none', border:'none'}}>   <img
                  style={{cursor:'pointer'}}
                  src={prova}
                  type="submit"
                  onclick={() => setTimeout(this.handleBtnClick(touched, errors),1)}
                  />
                  </button>
0
Usman
_ImageClick () {console.log('clicked');}
_

上記のようにメソッドを定義し、次のような関数を呼び出すだけです

onClick={this.ImageClick.bind(this)}

うまくいくことを願っています

0
kumaran ragunathan