Question

在下面的代码块中，我想根据我在顶部定义的面板执行排序和过滤。用户可以选择排序标准并按顺序对数据进行排序。用户可以选择标准和相关值以获得过滤结果。注意：首先，我想在过滤时根据所选标准提取动态下拉列表。

class StudentRow extends React.Component {
  render() {
    const student = this.props.student;

    return (
      <tr>
        <td>{student.ID}</td>
        <td>{student.Name}</td>
        <td>{student.Age}</td>
        <td>{student.Major}</td>
        <td>{student.College}</td>
      </tr>
    );
  }
}

class DropDown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {criteria: 'id', order: 'ascending'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    alert('Your cretiria is: ' + this.state.criteria + ' Order is: ' + this.state.order);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <label>
          Cretiria to sort:
          <select value={this.state.criteria} name="criteria" onChange={this.handleChange}>
            <option value="id">ID    </option>
            <option value="name">Name  </option>
            <option value="age">Age   </option>
            <option value="major">Major </option>
            <option value="college">College</option>
          </select>
        </label>

        <label>
          Order of sorting:
          <select value={this.state.order} name="order" onChange={this.handleChange}>
            <option value="ascending">Ascending</option>
            <option value="descending">Descending</option>
          </select>
        </label>

        <input type="submit" value="Submit" />
      </form>
    );
  }
}


class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {criteria: 'id', value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    alert('Your cretiria is: ' + this.state.criteria + ' Value is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <label>
          Cretiria to filter:
          <select value={this.state.criteria} name="criteria" onChange={this.handleChange}>
            <option value="id">ID    </option>
            <option value="name">Name  </option>
            <option value="age">Age   </option>
            <option value="major">Major </option>
            <option value="college">College</option>
          </select>
        </label>

        <label>
          Value to filer:
          <select value={this.state.value} name="value" onChange={this.handleChange}>
            // Need dynamic values here
          </select>
        </label>

        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class StudentTable extends React.Component {
  render() {
    const rows = [];

    this.props.students.forEach((student) => {
      rows.push(
        <StudentRow 
          student={student}
          key={student.ID}/>
      );
    });

    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Major</th>
            <th>College</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
}

Answer 1

const filtereData = data.filter(item => item.value === valuetofilter);

  <label>
    Value to filer:
    <select value={this.state.value} name="value" onChange={this.handleChange}>
      {filteredData.map(item => <option value={item.value}> {item.value} </option>}
    </select>
  </label>

将item.value替换为您要用于比较的数据中的值。然后，valuetofilter是用户查询的状态的值。如果匹配，则新选项元素将返回到选择中。

排序和过滤反应

1 个答案: