时间戳

首页 > 解决方案 > 如何使按钮对对象数组按字母顺序进行排序javascript反应

javascript - 如何使按钮对对象数组按字母顺序进行排序javascript反应

问题描述

尝试在组件中创建一个按钮，该按钮按每个对象名称按字母顺序对对象数组进行排序，并在单击时在组件中呈现

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

标签： javascriptreactjs

解决方案

你可以试试这个

menuSort = () => {
const newMenuItems = { ...this.props.menuItems };
newMenuItems.sort((a, b) => a.name.localeCompare(b.name));
this.setState({MenuItems: newMenuItems });
};

localeCompare() 方法返回一个数字，指示引用字符串是在排序顺序之前、之后还是与给定字符串相同。

然后在你的渲染函数中使用 MenuItems，就像你已经拥有的一样

推荐阅读