Question

最近我开始使用Typescript处理React js16。从角度移动到反应。我正在尝试创建自己的可排序表。在这里，我使用本机JS代码。而且我不确定我是做对还是错。我们没有使用角度的原因土生土长的js。在反应中，我们可以使用ref，但根据facebook它有一些问题。另一个像ReactDOM.findNode这样的方法我也不赞成使用。那么什么是最好的这样做的方法或我正在做的任何事情都没关系？我正在努力寻找最佳方法来做到这一点。

请参阅showDelete（）函数内部编写的代码。我添加className和的方式更换那些正确的类名或推荐的其他方法？排序逻辑不存在，因为我将进行服务器端排序。

＆＃13;

class CoursePage extends React.Component<CoursePageProps, any> {
    constructor(props: CoursePageProps) {
        super(props);
        this.showDelete = this.showDelete.bind(this);
    }
    showDelete(event: any) {
        let d = document.querySelectorAll('.customTable th');
        let c = document.getElementsByClassName('sortArrow') as HTMLCollectionOf<HTMLElement>;
        for (let i = 0; i < c.length; i++) {
            c[i].style.display = 'none';
        }
        for (let i = 0; i < d.length; i++) {
            d[i].className = d[i].className.replace(' active', '');
        }
        event.currentTarget.className += ' active';
        event.currentTarget.childNodes[1].className += ' fa fa-long-arrow-down';
        event.currentTarget.childNodes[1].style.display = 'inline';
    }
    render() {
        return (
            <div>
                <Custom courses={this.props.courses} showDelete={this.showDelete}/>
            </div>
        );
    }
}
function mapStateToProps(state: any) {
    return {
        courses: state.courses,
    };
}export default connect(mapStateToProps)(CoursePage);

＆＃13;

export default class Custom extends React.Component<buttonProps, any> {
    render() {
        const {showDelete, courses} = this.props;
        return (
            <div>
                <table className="table customTable">
            <thead>
                <tr>
                    <th onClick={(e) => showDelete(e)}>Id<i className="sortArrow"/></th>
                    <th onClick={(e) => showDelete(e)}>Name<i className="sortArrow"/></th>
                </tr>
            </thead>
            <tbody>
                ...
            </tbody>
        </table>
            </div>
        );
      }
}

＆＃13;

Answer 1

我找到了灵魂并相应地改变了我的代码：

＆＃13;

class CoursePage extends React.Component<CoursePageProps, any> {
    constructor(props: CoursePageProps) {
        super(props);
        this.state = {
               data : {
                columnName : '',
                sortOrder : '',
                searchText: ''
				}
        };
    }
    sortChanged (e: any, order: string) {
        const Data = this.state.data;
        Data.sortOrder = order.toString().toLowerCase() === 'asc' ? 'desc' : 'asc';
        Data.columnName = e.currentTarget.innerText;
        this.setState({data: Data});   
    }
    _sortClass(filterName: string) {
        return 'fa fa-fw ' + ((filterName === this.state.data.columnName) ? 
        ('fa-sort-' + this.state.data.sortOrder) : 'fa-sort');
    }
    render() {
        return (
            <div>
                <table className="table customTable">
                <thead>
                            <tr>
                                <th onClick={(e) => { this.sortChanged(e, this.state.data.sortOrder); }}>
                                Id
                                    <i className={this._sortClass('Id')}/></th>
                                <th onClick={(e) => { this.sortChanged(e, this.state.data.sortOrder); }}>
                                    Name
                                    <i className={this._sortClass('Name')}/></th>
                                <th onClick={(e) => { this.sortChanged(e, this.state.data.sortOrder); }}>
                                    Address
                                    <i className={this._sortClass('Address')}/>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        {this.props.courses.map((course: Course) =>
                    <CourseListRow key={course.id} course={course} />
                )}
                </tbody>
                </table>
            </div>
        );
    }
}
function mapStateToProps(state: any) {
    return {
        courses: state.courses,
    };

＆＃13;

如何在React js 16中编写普通的javascript？或者我们如何在React中使用document.getElementByClassName？

1 个答案: