Question

我正在尝试在React中创建一个在每个块中都有一个下拉菜单的小部件。我需要在每个相应列表中单击一个按钮时显示一个下拉列表。但是发生的是，当我单击按钮时，所有下拉列表都显示出来了（所有动态重复的元素中）。

class App extends Component {
  render() {
    return (
      <div className="wrapper">
        <div className="widget">
          <h2>whats happeing</h2>
          <Block data={mock} /> //sub component which has the dropdown
        </div>
      </div>
    );
  }
}

const Block = props => {
  let blocks = [];
  let [showDropdown, setShowDropdown] = useState(false); //currently i am trying to get this done with useState()

  if (props.data.length) {
    blocks = props.data.map(function(item) {
      return (
        <div key={item.id} className="block">
          <span
            className="dropdown-btn"
            onClick={() => setShowDropdown(!showDropdown)}
          >
            ▼
          </span>
          <div className="left-col">
            <p>{item.category}</p>
            <h3>
              <a href="#">{item.title}</a>
            </h3>
          </div>
          {showDropdown && <Dropdown />}
        </div>
      );
    });
  }
  return <div>{blocks}</div>;
};

这是指向代码的沙箱链接。您能否让我知道如何在React中处理此问题？ https://codesandbox.io/s/widget-with-drodown-kjovc

Answer 1

问题是您只有1个可见变量，但实际上需要多个。如果您进行如下更改，则它将正常运行

class Main { 
 public static int [][] a = {{1, 1, 1},
                             {1, 1, 1},
                             {1, 1, 1}};

 public static int [][] b = {{1 },
                             {1 },
                             {1 }};


  public static void print_matrix(int [][] a) {
  for(int i=0; i < a.length; i++) {
    for(int j=0; j< a[i].length; j++) 
    System.out.print(a[i][j] + " "); 
    System.out.println();
  }
 }


 public static void main(String [] args) { 

 int [][] x = Matrix.multiply(a, b); 
 print_matrix(x); // see if the multipication is correct    

 }
}

注意我们如何将可见的布尔值移动到其自己的组件中

Answer 2

您必须根据项目的ID来设置状态，因为这会影响特定的块，因此只需相应地更改状态即可。您可以在下面的代码中看到

     return (
        <div key={item.id} className="block">
          <span
            className="dropdown-btn"
            onClick={() => setShowDropdown(item.id)}
          >
            ▼
          </span>
          <div className="left-col">
            <p>{item.category}</p>
            <h3>
              <a href="#">{item.title}</a>
            </h3>
          </div>
          {showDropdown === item.id && <Dropdown />}
        </div>
      );

Answer 3

如果希望单独控制下拉菜单，则只需保持要将下拉菜单呈现给ID的状态即可。因此，一种实现方法是：

import React, { useState } from "react";
import Dropdown from "./dropdown";

const Block = props => {
  let blocks = [];
  let [showDropdown, setShowDropdown] = useState([]);

  const clickHandle = item => {
    let idIndex = showDropdown.indexOf(item);
    if (idIndex !== -1) {
      let newArray = [...showDropdown];
      newArray.splice(idIndex, 1);
      setShowDropdown(newArray);
    } else setShowDropdown([...showDropdown, item]);
  };

  if (props.data.length) {
    blocks = props.data.map(function(item) {
      return (
        <div key={item.id} className="block">
          <span className="dropdown-btn" onClick={() => clickHandle(item.id)}>
            ▼
          </span>
          <div className="left-col">
            <p>{item.category}</p>
            <h3>
              <a href="#">{item.title}</a>
            </h3>
          </div>
          {showDropdown.includes(item.id) && <Dropdown />}
        </div>
      );
    });
  }
  console.log(showDropdown);
  return <div>{blocks}</div>;
};
export default Block;

如何将React中的useState（）绑定到动态生成的<div>元素？

3 个答案: