從一個反應組件中的另一個JS文件執行一個函數

我想要點擊一個react元素從另一個涉及GET請求的js文件執行另一個函數。我將如何去做這件事。從一個反應組件中的另一個JS文件執行一個函數

陣營代碼：

/** @jsx React.DOM */ 
 

 
var SearchExample = React.createClass({ 
 

 
    getInitialState: function(){ 
 
     return { searchString: ' ' }; 
 
    }, 
 

 
    handleClick: function(event){ 
 
     // do stuff in another file 
 
    }, 
 

 
    handleChange: function(e){ 
 

 
     this.setState({searchString:e.target.value}); 
 
    }, 
 

 
    render: function() { 
 

 
     var libraries = this.props.items, 
 
      searchString = this.state.searchString.trim().toLowerCase(); 
 

 

 
     if(searchString.length > 0){ 
 

 
      // We are searching. Filter the results. 
 

 
      libraries = libraries.filter(function(l){ 
 
       return l.name.toLowerCase().match(searchString); 
 
      }); 
 

 
     } 
 
     else 
 
     { 
 
      libraries = libraries.filter(function(l){ 
 
       return l.popular.toLowerCase().match('true'); 
 
      }); 
 
     } 
 

 

 
     return <div> 
 
        <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="What are you interested in..." /> 
 

 
        <ul onClick={this.handleClick}> 
 

 
         { libraries.map(function(l){ 
 
          return <li key={l.name}>{l.name} </li> 
 
         })} 
 

 
        </ul> 
 

 
       </div>; 
 

 
    } 
 
}); 
 

 
                                           
 
var libraries = [ 
 

 
    { name: 'Technology', popular: 'true'}, 
 
    { name: 'Fishing', popular: 'true'}, 
 
    { name: 'School', popular: 'true'}, 
 
    { name: 'Camping', popular: 'true'}, 
 

 

 
]; 
 

 
// Render the SearchExample component on the page 
 

 
React.render(
 
    <SearchExample items={ libraries } />, 
 
    document.getElementById('sidebar') 
 
);

目前其他的JS代碼是在HTML文件中，但以後我可以改變。

來源

2015-08-28 Benjamin Chu

的可能的複製http://stackoverflow.com/questions/950087 /包括-A-的JavaScript文件功能於另一個的JavaScript文件 – Mark

傳遞充當道具SearchExample類

AnotherFile.jsx

var HandleSearch = React.createClass({ 
    handleSearch: function(a) { 
    //your code here 
    }, 
     render: function() { 
      return <SearchExample handleClickOnSearch={this.handleSearch} items={ libraries } /> 
    } 
});

搜索示例文件

var SearchExample = React.createClass({ 

getInitialState: function(){ 
    return { searchString: ' ' }; 
}, 

handleClick: function(event){ 
    this.props.handleClickOnSearch(this.state.searchString); 
}, 

handleChange: function(e){ 

    this.setState({searchString:e.target.value}); 
}, 

render: function() { 

    var libraries = this.props.items, 
     searchString = this.state.searchString.trim().toLowerCase(); 


    if(searchString.length > 0){ 

     // We are searching. Filter the results. 

     libraries = libraries.filter(function(l){ 
      return l.name.toLowerCase().match(searchString); 
     }); 

    } 
    else 
    { 
     libraries = libraries.filter(function(l){ 
      return l.popular.toLowerCase().match('true'); 
     }); 
    } 


    return <div> 
       <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="What are you interested in..." /> 

       <ul onClick={this.handleClick}> 

        { libraries.map(function(l){ 
         return <li key={l.name}>{l.name} </li> 
        })} 

       </ul> 

      </div>; 

} 
}); 


var libraries = [ 

{ name: 'Technology', popular: 'true'}, 
{ name: 'Fishing', popular: 'true'}, 
{ name: 'School', popular: 'true'}, 
{ name: 'Camping', popular: 'true'}, 


]; 

// Render the SearchExample component on the page 

React.render(
<HandleSearch />, 
document.getElementById('sidebar') 
);

來源

2015-08-28 05:49:37 programmer

從一個反應組件中的另一個JS文件執行一個函數

回答

相關問題