Question

我想在click上有一个react元素从另一个涉及GET请求的js文件中执行另一个函数。我该怎么做呢。

反应代码：

＆＃13;

/** @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')
);

＆＃13;

目前其他JS代码在html文件中，但我可以稍后更改。

Answer 1

将该函数作为支持传递给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')
);

从react组件中的另一个JS文件执行函数

1 个答案: