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

Question

最近我开始使用 Typescript 开发 React js16。从 Angular 移动到 react 。 我正在尝试创建自己的可排序表。在这里我使用原生 JS 代码。 而且我不确定我做的对还是错。因为我们没有使用 Angular native js。在 react 中我们可以使用 ref 但根据 facebook 它有一些问题。其他 像 ReactDOM.findNode 这样的方法我认为也被弃用了。那么什么是最好的 做这件事的方法或我正在做的任何事情都可以吗？我正在努力寻找最佳方法。

请查看 showDelete() 函数中的代码。我添加类名的方式和 替换那些正确的类名或推荐的任何其他方法？ 没有排序逻辑，因为我将进行服务器端排序。

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

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

Answer 1

我找到了答案并相应地更改了我的代码:

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,
    };