1

React-Starter-Kitを使用していますが、ブラウザで onClick={this.handleClick} が起動しないという問題があります。

何が起きているか: Colorswatches.js コンポーネントがロードされ、ブラウザーに表示されますが、onClick が機能しません。コンソール ログは表示されません。

私が問題だと思うのは、サーバー側ですべてをレンダリングしてクライアントに渡すと、クライアントはイベントバインディングのない静的な反応HTMLを取得します。

サーバー側のレンダリング後にクリックイベントをクライアント側で機能させるにはどうすればよいですか?

編集: jgldev から提供された例でコードを更新する

編集 2: componentDidMount() 関数を追加しました。コンソール ログを使用しても、ページの読み込み時にログが表示されない

編集 3: 私が発行したのは、クライアント側の再レンダリングを爆撃していた React-starter-kit の別の部分でした。最初の答えを正しいとマークしました。

src/component/ColorSwatches/ColorSwatches.js:

import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ColorSwatches.scss';

class ColorSwatches extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    componentDidMount() {
        console.log('I was mounted');
    }
    handleClick(){
        console.log('I was clicked');
    }
    render(){
        let colorSlices = this.props.colorSlices;
        let sku = this.props.sku;
        let currentSkuIndex = 0

        return (
            <div className='pdpColors'>
                <div className='colorSwatches' >
                    { colorSlices.map((colorSlice, index) => {
                        return (
                            <div title={colorSlice.color} onClick={()=>this.handleClick()}  key={index}>
                                <img src={colorSlice.swatchURL}/>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export default withStyles(ColorSwatches,s);
4

3 に答える 3

0

私の推測では、次のことが起こっていると思います。

  • 元々、thisマウントされた DOM コンポーネントを参照していましたが、これはあなたが望むものではありません。
  • onClick をラップすることonClick={()=>this.handleClick()}は正しい方向への一歩ですが、十分ではありません。thisは、react コンポーネントを参照するようになりましたが、正しいコンポーネントではありません。.map関数内で定義されているため、 colorSlice. これはあなたが望むものではありません。

私のアドバイスは、さらに一歩進めます。

render 内の return ステートメントの前に、次の行を追加します。

let that = this; // this refers to ColorSwatches component, as intended

マッピング関数内で onClick を次のように変更します。

onClick={that.handleClick}  // no need to add the wrapper now

お役に立てれば。

于 2016-03-22T22:28:34.930 に答える