点击提交失败后，根据单选按钮和输入字段的值过滤React表中的数据

import React, { Component } from 'react';

class TableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'Bob', age: 35 },
      ],
      filterOption: '',
      filterValue: '',
    };
  }

  handleFilterOptionChange = (event) => {
    this.setState({ filterOption: event.target.value });
  }

  handleFilterValueChange = (event) => {
    this.setState({ filterValue: event.target.value });
  }

  render() {
    const { data, filterOption, filterValue } = this.state;

    const filteredData = data.filter(item => {
      if (filterOption === 'name') {
        return item.name.toLowerCase().includes(filterValue.toLowerCase());
      } else if (filterOption === 'age') {
        return item.age.toString().includes(filterValue);
      } else {
        return true;
      }
    });

    return (
      <div>
        <form>
          <label>
            Filter by:
            <select value={filterOption} onChange={this.handleFilterOptionChange}>
              <option value="">All</option>
              <option value="name">Name</option>
              <option value="age">Age</option>
            </select>
          </label>
          <input type="text" value={filterValue} onChange={this.handleFilterValueChange} />
        </form>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            {filteredData.map(item => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default TableComponent;