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

您可以为每个孩子添加一个道具，表示该特定箭头对数据的排序方式，然后在手动点击方法中使用该道具来有条件地对数据进行排序。

父：

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

我通过将数据传递给子节点并使用handeClick中的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 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} />
}
});

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

2 个答案: