web-dev-qa-db-ja.com

React onClickおよびpreventDefault（）リンクの更新/リダイレクト？

私は反応してリンクをレンダリングしています：

render: ->
  `<a className="upvotes" onClick={this.upvote}>upvote</a>`

次に、上記のupvote関数があります：

upvote: ->
  // do stuff (ajax)

リンクの前に私はその場所に行きましたが、リンクに切り替える必要があり、ここに問題があります-.upvotesをクリックするたびに、ページが更新されます。

event.preventDefault（）-動作していません。

upvote: (e) ->
  e.preventDefault()
  // do stuff (ajax)

event.stopPropagation（）-動作していません。

upvote: (e) ->
  e.stopPropagation()
  // do stuff (ajax)

return false-動作していません。

upvote: (e) ->
  // do stuff (ajax)
  return false

また、index.htmlでjQueryを使用して上記のすべてを試しましたが、何も機能しないようです。ここで何をすべきか、間違っていることは何ですか？ event.typeをチェックしましたが、clickなので、どうにかしてリダイレクトを回避できるはずです。

すみません、Reactに関しては私はルーキーです。

ありがとうございました！

reactjshyperlinkcoffeescriptpreventdefault
54
Wordpressor

Reactイベントは、実際にはネイティブイベントではなく、合成イベントです。書かれているとおり here ：

イベントの委任：Reactは、実際にはイベントハンドラーをノード自体に付加しません。 Reactが起動すると、単一のイベントリスナーを使用して、トップレベルですべてのイベントのリッスンを開始します。コンポーネントがマウントまたはアンマウントされると、イベントハンドラーは単純に内部マッピングに追加または削除されます。イベントが発生すると、Reactはこのマッピングを使用してイベントをディスパッチする方法を認識します。マッピングにイベントハンドラが残っていない場合、Reactのイベントハンドラは単純なノーオペレーションです。

Use Event.stopImmediatePropagationを使用してみてください：

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
44
Alexandr Lazarev

ソリューションのフルバージョンは、onClick内でメソッドupvotesをラップし、eを渡してネイティブe.preventDefault（）を使用します。

upvotes = (e, arg1, arg2, arg3 ) => {
    e.preventDefault();
    //do something...
}

render(){
    return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }>
      upvote
    </a>);
{
52
Roman

bind（this）を試して、コードが以下のようになるようにします-

 <a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>

または、コンストラクタでes6反応コンポーネントで書いている場合、これを行うことができます

constructor(props){
   super(props);
   this.upvote = this.upvote.bind(this);
}

upvote(e){   // function upvote
   e.preventDefault();
   return false

}
14
deepak prakash

レンダリング：-> <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

6
xjinjin

私が見つけ、私のために働いた要点：

const DummyLink = ({onClick, children, props}) => (
    <a href="#" onClick={evt => {
        evt.preventDefault();
        onClick && onClick();
    }} {...props}>
        {children}
    </a>
);

Srphのクレジット https://Gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b5

1
TheFullResolution

私は過去にアンカータグとpreventDefaultでいくつかの問題を抱えており、私が間違っていることをいつも忘れているので、ここに私が見つけたものがあります。

よくある問題は、他のReactコンポーネントと同様に、コンポーネントの属性を直接破壊してアクセスしようとすることです。 これは機能しません。ページはリロードされます、たとえe.preventDefault()であっても：

function (e, { href }) {
  e.preventDefault();
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

おそらく、ページの完全な再読み込みが原因で、破壊によってエラー（Cannot read property 'href' of undefined）がコンソールに表示されないようです。関数にエラーがあるため、preventDefaultは呼び出されません。 hrefが＃の場合、実際のリロードがないため、エラーが適切に表示されます。

ネイティブのHTMLタグではなく、カスタムReactコンポーネントの2番目のハンドラー引数としてのみ属性にアクセスできます。したがって、もちろん、イベントでHTMLタグ属性にアクセスするには、次のようにします。

function (e) {
  e.preventDefault();
  const { href } = e.target;
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

これが、表示されないエラーに戸惑う私のような他の人々に役立つことを願っています！

0
DSav

このページに来たとき、言及されたオプションのいずれも正しいとは思えませんでした。彼らは物事をテストするためのアイデアを私に与えてくれましたが、これは私にとってうまくいくことがわかりました。

dontGoToLink(e) {
  e.preventDefault();
 }

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}
0
Iwnnay

このような状況で

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

ご覧のとおり、preventDefault（）を明示的に呼び出す必要があります。 this docsが役立つと思います。

0
Fabien Sartori

私のために働いた素敵でシンプルなオプションは次のとおりでした：

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>
0
David

React Routerを使用している場合、便利なコンポーネントLinkContainerを備えたreact-router-bootstrapライブラリを調べることをお勧めします。このコンポーネントはデフォルトのページのリロードを防止するため、イベントを処理する必要はありません。

あなたの場合、次のようになります。

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to={givePathHere}>
    <span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>
0
iggirex

これは、これらのハンドラーがスコープを保持しないためです。反応ドキュメントから： 反応ドキュメント

「自動バインドなし」セクションを確認します。 onClick =（）=> {}のようなハンドラーを作成する必要があります

0
viktor

チェックボックスを使用する場合

<input 
    type='checkbox'
    onChange={this.checkboxHandler}
/>

stopPropagationおよびstopImmediatePropagationは機能しません。

onClick= {this.checkboxHandler}を使用する必要があるため

0
роман пономарев

これらの方法はどれも役に立たなかったので、CSSでこれを解決しました。

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}
0
Suat Ağgez