javascript - 在 React 中使用单选按钮过滤内容

Question

我收到此错误，但我认为这与绑定(bind)函数不正确有关。

Uncaught TypeError: this.seState is not a function

基本上，我有一些数据想使用单选按钮进行过滤。

选择特定值的按钮应该只会导致那些具有该值作为其属性的对象被渲染。

import React, { Component } from 'react';

import { Card, Select, Segment, Container, Divider, Grid, Header, Image } from 'semantic-ui-react';
import '../css/app.css';

class FilterOptions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    var val = e.target.value;
    this.setState({ priority: val });
    this.props.changeOption(val);
  }

  render() {
    return (
      <div>
        <ul>
          <li>
            <label>
              <input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} />
              1
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} />
              2
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} />
              3
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} />
              4
            </label>
          </li>
        </ul>
      </div>
    );
  }
}

function FilterUsers(props) {
  return (
    <Container>
      <br />
      <br />
      <Grid columns={3} doubling stackable>
        {props.data.map((user) => (
          <Grid.Column key={user.name}>
            <Segment>
              <Card>
                <Card.Content>
                  <Card.Header>
                    <h2>name: {user.name}</h2>
                  </Card.Header>
                  <Card.Meta>
                    <span className="card__age">age: {user.age}</span>
                  </Card.Meta>
                  <Card.Description>priority: {user.priority}</Card.Description>
                  <Card.Description className="card__catergory">category: {user.category}</Card.Description>
                </Card.Content>
              </Card>
            </Segment>
          </Grid.Column>
        ))}
      </Grid>
    </Container>
  );
}

export default class SortAndFilterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(val) {
    this.setState({ priority: val });
    // var filteredByPriority = this.props.data.sort((a, b) => a.priority - b.priority);
    var filteredByPriority = this.props.data.filter(function(item) {
      return item.priority === val;
    });
    this.seState({ data: filteredByPriority });
    console.log(filteredData, val);
  }
  render() {
    return (
      <div>
        <h1>Sorts</h1>
        <FilterOptions data={this.state.data} changeOption={this.handleChange} />
        <FilterUsers data={this.state.data} />
      </div>
    );
  }
}

如有任何帮助，我们将不胜感激!

Answer 1

更改行

this.seState({ data: filteredByPriority });

至

this.setState({ data: filteredByPriority });