如何根据reactjs中点击的字母表过滤数据

import React, { Component } from 'react';

class FilteredList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [], // 数据列表
      filteredList: [], // 过滤后的数据列表
      alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] // 字母表
    };
  }

  componentDidMount() {
    // 从服务器或本地数据源获取数据并更新数据列表
    // 例如，可以使用axios库发送HTTP请求获取数据
    axios.get('/api/data')
      .then(response => {
        this.setState({ dataList: response.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  handleFilter(letter) {
    // 根据点击的字母过滤数据列表
    const filteredList = this.state.dataList.filter(item => item.name.startsWith(letter));
    this.setState({ filteredList });
  }

  render() {
    return (
      <div>
        <div>
          {/* 渲染字母表按钮 */}
          {this.state.alphabet.map(letter => (
            <button key={letter} onClick={() => this.handleFilter(letter)}>
              {letter}
            </button>
          ))}
        </div>
        <ul>
          {/* 渲染过滤后的数据列表 */}
          {this.state.filteredList.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredList;