gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 23:29:34 25 4
gpt4 key购买 nike

最近我开始使用 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>
);
}
}

最佳答案

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

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

关于javascript - 如何在 React js 16 中编写纯 javascript?或者我们如何在 React 中使用 document.getElementByClassName?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47834749/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com