異なる反応ファイルから関数を呼び出す

Question

私はこれを動作させるのに近いです。誰かがこれを手伝ってくれることを願っています。

私は2つの反応ファイルを持っています。 1つはContainerであり、もう1つはNavコンポーネントです。

_template.jsと呼ばれるコンテナコンポーネント内に、モーダルnpmパッケージをインポートしています。 Navコンポーネント内でアクセスしようとしているこのコンテナファイル内にshowModal関数を作成しました。

これは私がこれまで持っていると、このエラーにUncaught TypeError: Cannot read property 'modal' of undefined

_template.js受け取るものです：

import React from 'react'; 
import { Link } from 'react-router'; 


import { prefixLink } from 'gatsby-helpers'; 
import { config } from 'config'; 

import Headroom from 'react-headroom'; 

import Nav from './nav.js'; 

import '../css/main.scss'; 

import Modal from 'boron/DropModal'; 

const modalStyle = { 
    minHeight: '500px', 
    backgroundColor: '#303841' 
}; 

const backdropStyle = { 
    backgroundColor: '#F6C90E' 
}; 

const contentStyle = { 
    backgroundColor: '#303841', 
    padding: '3rem' 
}; 





export default class RootTemplate extends React.Component { 
    static propTypes = { 
    location: React.PropTypes.object.isRequired, 
    children: React.PropTypes.object.isRequired, 
    } 

    static contextTypes = { 
    router: React.PropTypes.object.isRequired, 
    } 

    constructor() { 
    super(); 

    } 

    showModal() { 
    this.refs.modal.show(); 
    } 



    render() { 
    return (
     <div> 
     <Headroom> 
      <Nav showModal={this.showModal}/> 
     </Headroom> 
     <Modal ref="modal" modalStyle={modalStyle} contentStyle={contentStyle} backdropStyle={backdropStyle}> 
      <form> 
      <label>Name:</label> 
      <input type="text"/> 
      <label>Email:</label> 
      <input type="email"/> 
      <label>Message:</label> 
      <input type="text-area"/> 
      <input type="submit" placeholder="Submit" /> 
      </form> 
     </Modal> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

そして、私のNav.jsファイル：

import React from 'react'; 
import { Link } from 'react-router'; 
import { prefixLink } from 'gatsby-helpers'; 



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma'; 



export default class nav extends React.Component { 
    static propTypes = { 
    name: React.PropTypes.string, 
    }; 

    constructor(props) { 
    super(props); 
    } 



    render() { 
    return (
     <div> 
     <Nav> 
      <NavGroup align="left"> 
      <NavItem> 
       <Link to={prefixLink('/')}> 
       <h2>Dillon Raphael</h2> 
       </Link> 
      </NavItem> 
      </NavGroup> 

      <NavToggle /> 

      <NavGroup align="right" isMenu> 
      <NavItem> 
      </NavItem> 
      <NavItem> 
      </NavItem> 
      <NavItem> 
       <a href="#" onClick={::this.props.showModal}>Let's Work!</a> 
      </NavItem> 
      </NavGroup> 
     </Nav> 



     </div> 
    ); 
    } 
} 

お知らせ<a href="#" onClick={::this.props.showModal}>Let's Work!</a>これはをここで私が_template.jsファイルから渡したshowModal関数を呼び出そうとしています。

Answer 1

_template.jsファイルで、あなたのコンストラクタにこのコードを追加します。

this.showModal = this.showModal.bind(this); 

コンストラクタを、このようになります。

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