Question

假设我有一个包含两个项目的数组我想制作一个点击事件，显示我点击的特定索引的一些内容

例如：

string cs = ConfigurationManager.ConnectionStrings["CONN"].ConnectionString;

using (SqlConnection con = new SqlConnection(cs))
{
    SqlCommand cmdd2 = new SqlCommand("select * from SubmitAdd where CarID='"+ Request.QueryString["id"].ToString() + "'", con);//taking CarID from QueryString
    con.Open();

    SqlDataAdapter sdda = new SqlDataAdapter(cmdd2);
    DataTable dtt = new DataTable();
    sdda.Fill(dtt);

    SqlCommand cmdd = new SqlCommand("select * from Reg where username='"+ Session["USERNAME"] + "'", con);

    SqlDataAdapter sda = new SqlDataAdapter(cmdd);
    DataTable dt = new DataTable();
    sda.Fill(dt);       

    if (dtt.Rows.Count != 0 && dt.Rows.Count != 0)
    {
        int id = Convert.ToInt32(dt.Rows[0][0]); // Get Registration ID from Reg Table
        int CarID = Convert.ToInt32(dtt.Rows[0][0]);// Get CarID from SubmitAdd Table

        string ss = "insert into BidTable values('" + id + "','" + CarID + "','" + TextBid.Text + "')";

        SqlCommand cmd = new SqlCommand(ss, con);

        SqlDataAdapter sda2 = new SqlDataAdapter(cmd);
        DataTable dt2 = new DataTable();
        sda2.Fill(dt2);
    }
}

现在它将显示我想要点击第一个项目按钮的两个项目，并仅显示相同项目索引下的隐藏内容而不是所有的项目

我该怎么做

非常感谢！

Answer 1

<button onClick={() => this.showContent(index)}>Show Content</button>

这是一般的想法。您需要将项目的索引传递给单击处理程序。在你的点击处理程序中，你可以做一些会自己编辑数组中项目的东西，将showContent布尔值设置为它们的一个属性，然后像这样使用它......

this.array.map((item, index) => {
   return (
      <div>
         {item.name}
         <button onClick={() => this.showContent(index)}>Show Content</button>
         {item.showContent &&
            this.renderContent()
         }
      </div>
   );
})

...或者您可以维护从项目ID到内容可见性的映射，并在渲染时引用它：

constructor(props) {
  super(props);

  this.state = {
    isItemContentVisible: {}
  };
}

showContent(id) {
  // merge new value with existing visibility status into new object
  this.setState({
    isItemContentVisible: {     
      ...this.state.isItemContentVisible,
      [id]: true
    }
  });
}

// ...and when you're rendering the list...
this.array.map((item, index) => {
   return (
      <div>
         {item.name}
         <button onClick={() => this.showContent(item.id)}>Show Content</button>
         {this.state.isItemContentVisible[item.id] &&
            this.renderContent()
         }
      </div>
   );
})

React - 通过单击事件在地图功能中渲染项目

1 个答案: