Question

我正在开发一个反应比较器。我是新来的人，我刚完成我的基本表格的整理，以便我的用户过滤他们的研究。

我创建了一个函数来测试第一个过滤器，但是控制台不允许我看到我的结果，也没有显示错误。只需快速关闭控制台上的信息即可。

我被困住了……我真的不明白我的问题，为什么函数在运行时直接绑定到我的函数关闭上。 filterClick()

我已经首先在App.js文件上单独测试了此功能。一切都还好。所以我很确定我的功能是正确的。此外，控制台没有显示任何错误，但我可以在控制台中保持打开结果。

附加的数据库是一个简单的json对象。

让我们看看附带的代码。

非常感谢您的帮助。

import React from "react";
import dataShop from '../dataShop.json'

class Filters extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "option1",
      zip_code: "",
      cabinePhoto: false,
      bornePhoto: false,
      helioBooth: false
    };

    //    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleChanges = e => {
    const input = e.target;
    const name = input.name;
    const value = input.type === "checkbox" ? input.checked : input.value;
    this.setState({ [name]: value });
  };

  filterClick = () => {
    //utiliser find() pour trouver un seul élément
    //utiliser filter() pour trouver plusieurs éléments et créer un nouveau

    const dataFilter = dataShop.filter(dataShop => (dataShop.Cabine_photo === "OUI") && (dataShop.Helio_booth === "OUI"))
    console.log(dataFilter);

  }

  render() {
    return (
      <form>
        <h1>Filtrer la recherche</h1>
        <div className="form-check">
          <label>
            <input
              name="selectedOption"
              type="radio"
              value="particuliers"
              checked={this.state.selectedOption === "particuliers"}
              onChange={this.handleChanges}
            />
            Particulier
          </label>
        </div>

        <div className="form-check">
          <label>
            <input
              name="selectedOption"
              type="radio"
              value="pros"
              checked={this.state.selectedOption === "pros"}
              onChange={this.handleChanges}
            />
            Pros
          </label>
        </div>

        <label>
          Code postal:
          <input
            type="text"
            name="zip_code"
            value={this.state.zip_code}
            onChange={this.handleChanges}
          />
        </label>
        <br/>
        <label>

          <input
            name="cabinePhoto"
            type="checkbox"
            value={this.state.cabinePhoto}
            onChange={this.handleChanges}
          />Cabine photo:{" "}

          <input
            name="bornePhoto"
            type="checkbox"
            value={this.state.bornePhoto}
            onChange={this.handleChanges}
          />Borne photo:{" "}

          <input
            name="helioBooth"
            type="checkbox"
            value={this.state.helioBooth}
            onChange={this.handleChanges}
          />Héliobooth:{" "}
        </label>
        <button onClick={this.filterClick}>Test Button</button>
      </form>
    );
  }
}

export default Filters;

Answer 1

我想您的页面在单击按钮时会刷新，因为它位于表单内。

您可以阻止表单提交

filterClick = e => {
  e.preventDefault();
  //utiliser find() pour trouver un seul élément
  //utiliser filter() pour trouver plusieurs éléments et créer un nouveau

  const dataFilter = dataShop.filter(dataShop => (dataShop.Cabine_photo === "OUI") && 
  (dataShop.Helio_booth === "OUI"))
  console.log(dataFilter);

}

如何修复React过滤器搜索栏

1 个答案: