Javascript 当其中一个使用组件的属性时，如何在单击React时调用两个函数

我有一个被排序的数组，我想更改箭头的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 Clickable=React.createClass({
handleClick:function（）{
this.props.onClick（this.props.index）；
},
渲染：函数（）{
返回
}
});

容器

  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'));

var排行榜=React.createClass({
getInitialState:函数（）{
此.state={
activeIndex:null
};
返回{
数据：加载，
};
},
handleClick:函数（索引）{
this.setState（{activeIndex:index}）；
},
componentWillMount:function（）{
取（'https://fcctop100.herokuapp.com/api/fccusers/top/recent', {
方法：“获取”
})。然后（response=>response.json（））。然后（data=>{
这是我的国家({
数据：数据，
});
}).catch（函数（错误）{
日志（“错误为”，错误）；
});
},
render:function（）{
返回(
freeCodeCamp排行榜
#
露营者姓名
{this.handleClick；this.setState（this.state.data.sort（sortDescending（“最近”））}
src=”https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"/>
{信息}
);
}
});
ReactDOM.render（，document.getElementById（'theBoard'）；

---

我意识到代码太多了，但我试着去掉不相关的部分

我通过将数据传递给子级并使用handeClick中的and if语句来解决这个问题，并根据索引执行相应的函数

家长：

<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 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.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} />
}
});

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} />
    }
});

var Clickable=React.createClass({
handleClick:function（）{
this.props.onClick（this.props.index）；
if（this.props.index==0）{
this.setState（this.props.data.sort（排序（“用户名”））；
}
else if（this.props.index==1）{
this.setState（this.props.data.sort（sortDescending）（“用户名”））；
}
else if（this.props.index==2）{
this.setState（this.props.data.sort（排序（“最近”））；
}
else if（this.props.index==3）{
this.setState（this.props.data.sort（sortDescending（“最近”））；
}
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”））；
}
},
渲染：函数（）{
返回
}
});

您可以为每个子级添加一个表示特定箭头如何对数据排序的道具，然后在handleclick方法中使用该道具对数据进行有条件排序

家长：

<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 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排行榜=React.createClass({
getInitialState:函数（）{
此.state={
activeIndex:null
};
返回{
数据：“正在加载”，
};
},
handleClick:函数（sortType，索引）{
const sortedData=this.state.data.slice（）；
if（sortType.direction==“下行”）{
sortedData.sort（sortDescending（sortType.filter））；
}
//这里还有其他种类的
这是我的国家({
activeIndex:index，
数据：sortedData
});
},
componentWillMount:function（）{
取（'https://fcctop100.herokuapp.com/api/fccusers/top/recent', {
方法：“获取”
})。然后（response=>response.json（））。然后（data=>{
这是我的国家({
数据：数据，
});
}).catch（函数（错误）{
日志（“错误为”，错误）；
});
},
render:function（）{
返回(
freeCodeCamp排行榜
#
露营者姓名
this.handleClick（sortType，index）}
sortType={{方向：“升序”，筛选器：“最近”}
src=”https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png"
/>
this.handleClick（sortType，index）}
sortType={{direction:'descending'，filter:'recent'}
src=”https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-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} />
}
});

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} />
    }
});

var Clickable=React.createClass({
handleClick:function（）{
this.props.onClick（this.props.sortType，this.props.index）；
},
渲染：函数（）{
返回
}
});

为什么不更新onClick处理程序本身的状态，而不是调用一个单独的方法呢？我最初就是这么做的，但我有六个不同的箭头，每个箭头都需要一个不同的排序函数，所以一个广泛的onClick处理程序不起作用。有办法解决吗？你的代码中有个bug。。。onClick={（）=>{this.handleClick；this.setState（this.state.data.sort（sortdescing（“最近”）））}}您需要执行此操作。handleClick（）此处，您在可单击组件中访问和修改的状态与父组件中的状态不同，因此handleClick函数似乎不起任何作用。它实际上会是什么