onClickが呼び出されていないReactJS

downvotingする前に、私はこの同じ問題の周りに他の多くの解決策を行ってきましたが、この問題を解決する答えが見つかりません。レンダリングonClickが呼び出されていないReactJS

constructor() { 
     super(); 
     this.state = { 
      submissionFormCount: 0 
     } 
     this.addToSubmissionFormCount = this.addToSubmissionFormCount.bind(this); 
    }

：

コンストラクタ：私はトラブルのonClickは私の機能をオフに解雇する属性を取得しようとしたんだ

は、ここに問題のあるコンポーネントからの作品だ

   <div className="row"> 
        <div className="col s12 m12 l12"> 
         <h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5> 
        </div> 
       </div>

はclickHandler：

addToSubmissionFormCount() { 
     alert('Here'); 
     this.setState({ 
      submissionFormCount: this.state.submissionFormCount++ 
     }); 
    }

私は

'を反応させ、DOM /サーバー' を使用してExpressサーバからアプリをレンダリングしていますがここで私はコンポーネントをレンダリングしています方法は次のとおりです。

exports.beatSubmission = (req, res) => { 
    const appString = renderToString(<App type="beatSubmission"/>); 
    res.send(beatSubmissionTemplate({ 
     body: appString 
    })) 
}

出典

2017-02-04 SuperCoolDude1337

ウェブアクセシビリティを向上させるために、「

」を「」にラップする以外は、コードはわかります。 – zurfyx

あなたのアプリケーションをクライアント側ですべて、またはすべてをノードにロードしていますか？ Expressを使ってどのようにレンダリングしているかについてのあなたのコメントは、あなたがアプリケーションのクライアント側のバージョンをロードしていないと思うように思えます。 – Parris

@Parris私はクライアント側でレンダリングしています（私は信じています）。ページは正しくレンダリングされ、上記のマークアップはメインのAppコンポーネントの子です。 – SuperCoolDude1337

私はあなただけがサーバ側でコンポーネントを反応させ、レンダリングしていると思います。私はこれを考える理由は、あなたがコピーした次のコードは次のとおりです。

exports.beatSubmission = (req, res) => { 
    const appString = renderToString(<App type="beatSubmission"/>); 
    res.send(beatSubmissionTemplate({ 
     body: appString 
    })) 
}

あなたは文字列にコンポーネントをレンダリングし、静的なHTMLなどのフロントエンドに文字列を出荷しています。これにより実際に適切にレンダリングされたマークアップが得られますが、非対話型のアプリケーションになります。クリックハンドラが動作していることが

、また、あなたのJSをコンパイルする必要があり、このようなフロントエンドで使用するためにそれを含める：

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L76 renderToString(<Html assets={webpackIsomorphicTools.assets()} store={store}/>));

これを行うには、いくつかの方法があります。テンプレートにフロントエンド用にプリパッケージされたJSでスクリプトファイルを手動で追加することも、Webpack Isomorphic Toolsを使用することもできます。

私は同型（サーバー/クライアント側のレンダリング）パスを導く反応チュートリアルを読んでいると思われます。サーバー、クライアント、またはその両方でreactを実行できます。両方で実行すると作業が必要になりますが、アプリケーションがより速く感じられるようになります。

出典

2017-02-05 08:27:54 Parris

店を利用する必要がありますか？ – SuperCoolDude1337

@ SuperCoolDude1337あなたはredux、店舗などの使用を避けることができます。ここで唯一重要な部分は、JSバンドルだけです。したがって、 'webpackIsomorphicTools.assets（）'は必要なものだけでなければなりません。 – Parris

私ができますコードに何か問題があるのを見てください。しかし、私の心に来る唯一の事は、<h5>を何らかの関数、例えばマッピングや配列のようなものにレンダリングしている場合です。その場合は、返す前にレンダリング関数にvar self = thisを定義してから、self.addToSubmissionFormCountを使用する必要があります。

P.S. <h5>タグでonClickハンドラを使用することはお勧めしません

出典

2017-02-05 01:31:00

あなたは最後のノートで詳しく説明できますか？ –

h5をアンカータグに変更してください。だから、置き換える：

<h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5>

で：

<a onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</a>

あなたはとにかくあなたが後でたいあなたのアンカーのスタイルを設定することができます。たとえば、カーソルを持っていないときにホバーする場合は、cursor: none

出典

2017-02-05 01:36:18

お薦めいただきありがとうございますが、これでも私には同じ問題が残っています。 – SuperCoolDude1337

反応の状態を変更しないでください。

変更を行います。 this.state.submissionFormCount ++ ： this.state.submissionFormCount + 1

出典

2017-02-05 06:38:13

onClickが呼び出されていないReactJS

」を「」にラップする以外は、コードはわかります。 – zurfyx

答えて

関連する問題