javascript - 在 React 组件中执行另一个 JS 文件中的函数

Question

我想让一个 React 元素在单击时执行另一个涉及 GET 请求的 js 文件中的另一个函数。我该如何去做呢。

react 代码:

/** @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 文件中，但我可以稍后更改。

Answer 1

将该函数作为 prop 传递给 SearchExample 类

另一个文件.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')
);