Question

我正在为我的网站建立高级搜索过滤器。这是图片

这是React引导程序的崩溃，并且此过滤器包含rc滑块，用于过滤年龄，距离和受欢迎程度。当我单击向下的箭头时，它会折叠并立即崩溃。这是filter.js代码。我仍然处于现代堆栈开发的初期。我期待为此的答案。谢谢！

import React, { Component } from 'react';
import { Collapse } from 'react-bootstrap';
import OneFilter from '../components/OneFilter.js';
import Tags from '../../Profile/MyProfile/components/MyTags.js';

class Filter extends Component {

  state = { }
  age = [18, 130];
  distance = [0, 500];
  popularity = [0, 10000];
  tags = [];
  suggestions = [];

  filterAge = (value) => { this.age = value; }

  filterDistance = (value) => { this.distance = value; }

  filterPopularity = (value) => { this.popularity = value; }

  filterTags = (value) => { this.tags = value; }

  changeSuggestions = () => {
    const { age, distance, popularity, tags } = this;
    this.props.onSubmit({ age, distance, popularity, tags });
  }

  render() {
    const { selection } = this.props;
    const { age, distance, popularity, tags } = selection;
    const marksAge = {
      18: 18,
      25: 25,
      30: 30,
      40: 40,
      50: 50,
      60: 60,
      75: 75,
      100: '> 100 ans',
    };
    const marksDistance = {
      0: 0,
      10: 10,
      20: 20,
      30: 30,
      50: 50,
      100: 100,
      200: '> 200 km',
    };
    const marksPopularity = {
      0: 'Bronze',
      50: 'Argent',
      100: 'Or',
      500: 'Diamant',
    };
    const ageSlider = (<OneFilter
      name="age"
      onChange={this.filterAge}
      marks={marksAge}
      min={18}
      max={100}
      defaultValue={age}
    />);
    const distanceSlider = (<OneFilter
      name="distance"
      onChange={this.filterDistance}
      marks={marksDistance}
      min={0}
      max={200}
      defaultValue={distance}
    />);
    const popularitySlider = (<OneFilter
      name="popularity"
      onChange={this.filterPopularity}
      marks={marksPopularity}
      min={0}
      max={500}
      defaultValue={popularity}
    />);
    const tagsFilter = (<Tags
      suggestions={this.suggestions}
      tags={tags}
      onAddOrDelete={this.filterTags}
    />);
    const tab = [
      { title: 'Age', filter: ageSlider },
      { title: 'Distance', filter: distanceSlider },
      { title: 'Popularity', filter: popularitySlider },
      { title: 'Tags', filter: tagsFilter },
    ];
    const show = tab.map(data => (
      <div key={data.title} className="slider-container row">
        <div className="slider-title col-lg-1"><b>{data.title}</b></div>
        {data.filter}
      </div>
    ));

    return (
      <div className="filter-search">
        <button className="advanced-search" onClick={() => this.setState({ open: !this.state.open })}>
          <div>Advanced search</div>
          <div className="fa fa-arrow-circle-down" />
        </button>
        <Collapse in={this.state.open}>
          <div className="">
            {show}
            <button className="btn btn-default" onClick={this.changeSuggestions}>
              Update
            </button>
          </div>
        </Collapse>
      </div>
    );
  }
}

export default Filter;

Answer 1

我对您的代码做了一些修改。您应该存储可用于重新渲染组件内部状态的变量。并且必须使用this.setState（）方法对其进行更新。

您还可以在下面的链接中查看Collapse的文档。

https://reactstrap.github.io/components/collapse/

这是代码。检查并查看它是否有效。

import React, { Component } from 'react';
import { Collapse } from 'react-bootstrap';
import OneFilter from '../components/OneFilter.js';
import Tags from '../../Profile/MyProfile/components/MyTags.js';

class Filter extends Component {
    constructor() {
        this.state = {
            open: false,
            age: [18, 130];
            distance: [0, 500];
            popularity: [0, 10000];
            tags: [];
            suggestions: [];
        }
    }

    filterAge = (value) => { this.setState({ age: value }) }

    filterDistance = (value) => { this.setState({ distance: value }) }

    filterPopularity = (value) => { this.setState({ popularity: value }) }

    filterTags = (value) => { this.setState({ tags: value }) }

    changeSuggestions = () => {
        const { age, distance, popularity, tags } = this.state;
        this.props.onSubmit({ age, distance, popularity, tags });
    }

    render() {
        const { selection } = this.props;
        const { age, distance, popularity, tags } = selection;
        const marksAge = {
            18: 18,
            25: 25,
            30: 30,
            40: 40,
            50: 50,
            60: 60,
            75: 75,
            100: '> 100 ans',
        };
        const marksDistance = {
            0: 0,
            10: 10,
            20: 20,
            30: 30,
            50: 50,
            100: 100,
            200: '> 200 km',
        };
        const marksPopularity = {
            0: 'Bronze',
            50: 'Argent',
            100: 'Or',
            500: 'Diamant',
        };
        const ageSlider = (<OneFilter
            name="age"
            onChange={this.filterAge}
            marks={marksAge}
            min={18}
            max={100}
            defaultValue={age}
        />);
        const distanceSlider = (<OneFilter
            name="distance"
            onChange={this.filterDistance}
            marks={marksDistance}
            min={0}
            max={200}
            defaultValue={distance}
        />);
        const popularitySlider = (<OneFilter
            name="popularity"
            onChange={this.filterPopularity}
            marks={marksPopularity}
            min={0}
            max={500}
            defaultValue={popularity}
        />);
        const tagsFilter = (<Tags
            suggestions={this.suggestions}
            tags={tags}
            onAddOrDelete={this.filterTags}
        />);
        const tab = [
            { title: 'Age', filter: ageSlider },
            { title: 'Distance', filter: distanceSlider },
            { title: 'Popularity', filter: popularitySlider },
            { title: 'Tags', filter: tagsFilter },
        ];
        const show = tab.map(data => (
            <div key={data.title} className="slider-container row">
                <div className="slider-title col-lg-1"><b>{data.title}</b></div>
                {data.filter}
            </div>
        ));

        return (
            <div className="filter-search">
                <button className="advanced-search" onClick={() => this.setState({ open: !this.state.open })}>
                    <div>Advanced search</div>
                    <div className="fa fa-arrow-circle-down" />
                </button>
                <Collapse isOpen={this.state.open}>
                    <div className="">
                        {show}
                        <button className="btn btn-default" onClick={this.changeSuggestions}>
                            Update
                        </button>
                    </div>
                </Collapse>
            </div>
        );
    }
}

export default Filter;

崩溃后立即在反应自举崩溃中崩溃

1 个答案: