web-dev-qa-db-ja.com

Reactでは、クリック時にアンカーが何もしないようにするにはどうすればよいですか？

次のhtml要素があります。

_<a href onClick={() => fields.Push()}>Add Email</a>
_

Href属性が必要なので、bootstrap=は、リンクスタイリング（色、カーソル）で要素をスタイルします。

問題は、今クリックすると、ブラウザがリダイレクトされることです。上記を更新してブラウザのonClickをリダイレクトせずにfields.Push()を実行するにはどうすればよいですか？

javascripttwitter-bootstrapreactjsbootstrap-4
11
AnApprentice

次のようにonClickイベントからpreventDefault関数を呼び出す必要があります。

class App extends React.Component {
  onClick = (e) => {
    e.preventDefault()
    console.log('onclick..')
  }
  render() {
    return (
      <a href onClick={this.onClick} >Click me</a>
    )
  }
}

次のようなものをユースケースに使用できます。

    const renderEmails = ({ fields }) => (
      ...
      <a href onClick={(e) => {
        e.preventDefault()
        fields.Push()
      }}>Add Email</a>
      ...
    )
10
Ritesh Bansal

このインラインを記述するのではなく、reactコンポーネントで記述メソッドclickHappensを考慮する必要があります。うまくいきますように！

<a href onClick={(e) => {e.preventDefault(); fields.Push()}}> Add Email </a>
5
Jan Ciołek

javascript：void（0）を追加：

<a href="javascript:void(0);" onClick={() => fields.Push()}>Add Email</a>
1
Ashu