嘗試在組件中創建一個按鈕，按每個物件名稱的字母順序對物件陣列進行排序，并在單擊時在組件中呈現
menuItems = [{name: pizza}, {name: burger}]
class MenuItems extends Component {
handleclick = (item) => {
this.props.deleteMenuItem(item.id);
}
render(){
return (
<div>
<button onClick={this.handlechange}>filter a to z</button>
{this.props.menuItems.map((item) =>(
<li class="list" key={item.id}>
{item.name}
<br></br>
{item.body}
<br></br>
<img src={item.image}></img>
<br></br>
<button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
</li>
))}
</div>
)
}
}
export default connect(null, {deleteMenuItem})(MenuItems)```
uj5u.com熱心網友回復：
你可以試試這個
menuSort = () => {
const newMenuItems = { ...this.props.menuItems };
newMenuItems.sort((a, b) => a.name.localeCompare(b.name));
this.setState({MenuItems: newMenuItems });
};
localeCompare() 方法回傳一個數字，指示參考字串在排序順序中是在給定字串之前、之后還是相同。
然后在您的渲染功能中使用 MenuItems，就像您已經擁有的一樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318238.html
標籤：javascript 反应