当一个组件中的一种用途属性之一时，如何在React中调用两个函数

Question

我有一个我被排序的数组，我想更改箭头的CSS类以指示当前排序。我具有更改类别和对数组进行排序的功能，但是我不能将它们组合起来，因为不能仅将其写入功能。我该如何结合这些？这是相关代码：

组件

var Clickable = React.createClass ({
handleClick: function() {
    this.props.onClick(this.props.index);
},
render: function () {
    return <img className={this.props.isActive ? 'currentArrow' : 'arrow'}      onClick={this.handleClick}
                src={this.props.src} />
}
});

容器

  var LeaderBoard = React.createClass({
getInitialState: function() {
    this.state = {
        activeIndex: null
    };
    return {
        data: loading,
    };
},
handleClick: function(index) {
    this.setState({activeIndex: index});
},
componentWillMount: function() {
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent', {
        method: 'get'
    }).then(response => response.json()).then(data => {
        this.setState({
            data: data,
        });
    }).catch(function(error) {
        console.log("error is ", error);
    });
},
render: function() {
    return (
        <div>
            <div id="Title" className="row">
                <h1>freeCodeCamp Leaderboard</h1>
            </div>
            <div className="row">
                <div className="col-md-1 col-xs-1">
                    <h4>#</h4>
                </div>
                <div className="col-md-3 col-xs-3">
                    <h4>Camper Name
                        <Clickable index={0} isActive={this.state.activeIndex===0}
 ////Second function works but the class is not changed
                        onClick={() => {this.handleClick; this.setState(this.state.data.sort(sortDescending("recent")))}}
                        src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"/>
                        <Clickable index={1} isActive={this.state.activeIndex===1}
  ///class is changed but I cannot add the sorting function
                        onClick ={this.handleClick}
                        src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png"/>
                    </h4>
                </div>
                </div>
            </div>
            <div>{information}</div>
        </div>
    );
}
});

ReactDOM.render(<LeaderBoard />, document.getElementById('theBoard'));

我意识到它的大量代码，但我试图拿出无关的部分。

Answer 1

您可以向每个孩子添加一个代表该特定箭头如何对数据进行分类的道具，然后将其在Handleclick方法中使用该箭头进行条件分类。

父母：

var LeaderBoard = React.createClass({
    getInitialState: function() {
        this.state = {
            activeIndex: null
        };
        return {
            data: 'loading',
        };
    },
    handleClick: function(sortType, index) {
        const sortedData = this.state.data.slice();
        if (sortType.direction === "descending") {
            sortedData.sort(sortDescending(sortType.filter));
        }
        // other sortTypes here
        this.setState({
            activeIndex: index,
            data: sortedData
        });
    },
    componentWillMount: function() {
        fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent', {
            method: 'get'
        }).then(response => response.json()).then(data => {
            this.setState({
                data: data,
            });
        }).catch(function(error) {
            console.log("error is ", error);
        });
    },
    render: function() {
        return (
            <div>
                <div id="Title" className="row">
                    <h1>freeCodeCamp Leaderboard</h1>
                </div>
                <div className="row">
                    <div className="col-md-1 col-xs-1">
                        <h4>#</h4>
                    </div>
                    <div className="col-md-3 col-xs-3">
                        <h4>Camper Name
                            <Clickable index={0} 
                              isActive={this.state.activeIndex===0}
                              onClick={(sortType, index) => this.handleClick(sortType, index)}
                              sortType = {{direction: 'ascending', filter: 'recent'}}
                              src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"
                            />
                            <Clickable index={0} 
                              isActive={this.state.activeIndex===0}
                              onClick={(sortType, index) => this.handleClick(sortType, index)}
                              sortType = {{direction: 'descending', filter: 'recent'}}
                              src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png"
                            />
                        </h4>
                    </div>
                    </div>
                </div>
                <div>{information}</div>
            </div>
        );
    }
});

儿童：

var Clickable = React.createClass ({
    handleClick: function() {
        this.props.onClick(this.props.sortType, this.props.index);
    },
    render: function () {
        return <img className={this.props.isActive ? 'currentArrow' : 'arrow'}      onClick={this.handleClick}
                    src={this.props.src} />
    }
});

Answer 2

我通过基于索引中执行适当函数的索引中的儿童以及使用和使用语句来解决它。

父母：

<Clickable data={this.state.data} index={0} isActive={this.state.activeIndex===0} onClick={this.handleClick}
src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"/>

儿童：

var Clickable = React.createClass ({
handleClick: function() {
    this.props.onClick(this.props.index);
    if (this.props.index ===0) {
        this.setState(this.props.data.sort(sortAscending("username")));
    }
    else if (this.props.index ===1) {
        this.setState(this.props.data.sort(sortDescending("username")));
    }
    else if (this.props.index ===2) {
        this.setState(this.props.data.sort(sortAscending("recent")));
    }
    else if (this.props.index ===3) {
        this.setState(this.props.data.sort(sortDescending("recent")));
    }
    else if (this.props.index ===4) {
        this.setState(this.props.data.sort(sortAscending("alltime")));
    }
    else if (this.props.index ===5) {
        this.setState(this.props.data.sort(sortDescending("alltime")));
    }
},
render: function () {
    return <img className={this.props.isActive ? 'currentArrow' : 'arrow'} onClick={this.handleClick}
                src={this.props.src} />
}
});