子コンポーネントのオブジェクトに.onClickメソッドを追加できません。

私はReactとjQueryを使用しています。私は、同じAppコンポーネントの子である、IndexとBodyの2つのコンポーネントを持っています。子コンポーネントのオブジェクトに.onClickメソッドを追加できません。

Indexのオブジェクトを.onClick関数でレンダリングしたいとします。ただし、関数は最初にレンダリングするにはBodyが必要です。

私はBody内のオブジェクトにアクセスする必要があるので、私は親AppコンポーネントでIndex右からオブジェクトに.onClick機能を追加することを考えました。

これが私のやり方です。すべてがロードされますが、要素には.onClick機能はありません。要素をクリックしても、コンソールには何も印刷されません。

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Index ref="index"/> 
       <Body ref="body"/> 
      </div>); 
    } 
    componentDidMount() { 
     function autoScroll (…) { 
      const fp = findDOMNode(this.refs.body.refs.fullpage); // can only do this after rendering 
      $(fp).fullpage.moveTo(…); // function to be called by object on Index 
      console.log("clicked"); 
     } 

     const lab = findDOMNode(this.refs.index.refs.lab) 
     $(lab).onClick = function(){ this.autoScroll(…); }; 
    } 
}

出典

2017-11-12 Anonymous

「onclick」ハンドラは、コンポーネントの最初のマウント後に呼び出されます。私は 'componentDidMount（）'の外であなたのautoScroll関数を定義できると思います。 –

私は、 'fp'オブジェクトに対してautoScrollに追加の引数を追加することができます。 'fp = findDOMNode ...'は残念なことにレンダリングの後で 'componentDidMount'でのみ呼び出すことができます。しかしどちらの方法でも、これはまだ機能しません。 –

jqueryを使用して、反応中のonclickハンドラを設定しないでください。代わりに、関数は、props経由でIndexに渡し、内部Indexはそれを必要とするオブジェクトに渡します。 – xDreamCoding

さてさて、私は多分あなたはDOMを操作する二つのものを持っている場合、それは複雑に得ることができます主な理由はリアクトアプリで離れjQueryのから滞在示唆で始めるつもりです。

通常、あなたはonClickハンドラのクラスメソッドを定義し、それをrenderメソッドに渡します。あなたは正しい道を歩いています！

class App extends React.Component { 

    // This will be the function we will pass down as the onClick 
    autoScroll =() => { 
    const fp = findDOMNode(this.refs.body.refs.fullpage); 
    $(fp).fullpage.moveTo(…); 
    console.log("clicked"); 
    } 

    render() { 
    return (
     <div> 
     <Index handleClick={this.autoScroll} /> 
     <Body handleClick={this.autoScoll} /> 
     </div> 
    ); 

    } 
} 


class Index extends React.Component { 
    // You can access the click handler with the props object. 
    render() { 
    return (
     <div> 
     <button onClick={this.props.handleClick}>I am the index component</button> 
     </div> 
    ); 

    } 
}

出典

2017-11-12 05:19:07 Djtouchette

ありがとうございました。 'onClick = {（）=> this.props.handleClick}'に変更して、レンダリング中に 'handleClick'が起動しないようにしました。 –

そして、残念なことに同じプロジェクトでjQueryとReactを使用する必要があります。 –

子コンポーネントのオブジェクトに.onClickメソッドを追加できません。

答えて

関連する問題