Javascript 在React.js中按字母顺序(升序/降序)排序ul列表项时遇到问题
我是全新的反应,所以这可能是一个非常愚蠢的问题,但我真的需要一些帮助!我看了所有的地方,不明白为什么sortList函数什么都不做。以下是我的组件代码的开头:Javascript 在React.js中按字母顺序(升序/降序)排序ul列表项时遇到问题,javascript,reactjs,Javascript,Reactjs,我是全新的反应,所以这可能是一个非常愚蠢的问题,但我真的需要一些帮助!我看了所有的地方,不明白为什么sortList函数什么都不做。以下是我的组件代码的开头: class App extends React.Component { constructor(props) { super(props); this.state = { items: [ { id: 1
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
id: 1,
text: 'bananas',
done: false
},
{
id: 2,
text: 'milk',
done: false
},
{
id: 3,
text: 'bread',
done: false
},
{
id: 4,
text: 'cheese',
done: false
}
],
text: "",
ascending: true
};
this.handleNewText = this.handleNewText.bind(this);
this.addItem = this.addItem.bind(this);
this.handleCheckOff = this.handleCheckOff.bind(this);
this.handleDeleteItem = this.handleDeleteItem.bind(this);
this.sortList = this.sortList.bind(this);
}
而这个功能不起作用
sortList() {
let newList = this.state.items.sort((a,b) => {
if (this.state.ascending) {
return a.text - b.text;
} else {
return b.text - a.text;
}
});
this.setState({
ascending: !this.state.ascending,
items: newList
});
}
和渲染功能
render() {
return (
<div className="col-lg-6">
<form>
<input type="text" id="textBox" className="form-control" onChange={this.handleNewText} value={this.state.text} />
<button id="addButton" className="btn btn-primary" onClick={this.addItem} disabled={!this.state.text}>{"Add Item"}</button>
</form>
<div id="postIt">
<h1>Shopping List</h1>
<List items={this.state.items} onItemCheckedOff={this.handleCheckOff} onDeleteItem={this.handleDeleteItem} />
<button id="sortButton" className="btn btn-primary" onClick={this.sortList}>{"Sort"}</button>
</div>
</div>
);
}
}
render(){
返回(
{“添加项”}
购物清单
{“排序”}
);
}
}
除了SortList功能外,其他功能都运行良好。我尝试了许多不同的方法,但都没能成功。发生的最多的是列表项消失了 您可以尝试从每个字符串中减去2个字符串,返回Nan。排序需要1或-1
let newList = this.state.items.sort((a, b) => {
if (this.state.ascending && a.text > b.text) {
return 1;
} else {
return -1;
}
});
希望回答你的问题这个.setState({…})是什么意思代码>做什么?这是你自己的职责吗?您的
sortList
函数是否被调用?感谢您的回复!我希望它能生成初始项[]数组的新排序newList。但很明显,它不起作用!sortList由底部的“sortButton”调用。“添加按钮”工作得很好。。。