时间戳

首页 > 解决方案 > React/JS 如何将特定的映射元素分配给状态？

javascript - React/JS 如何将特定的映射元素分配给状态？

问题描述

我的搜索组件根据输入返回一个映射的结果列表。根据单击的列表元素，我想将其分配给我当前的库存状态，但我不确定如何访问该特定元素。

const selectStock = ()=>{
    setSearch("");
    setCurrentStock();
  }

return (
  <div className="searchContainer">
    <form className="searchBar">
      <input
        className="search"
        type="text"
        placeholder="Search Ticker Symbol"
        onChange={handleSearch}
      />
    </form>
    <div className="searchResults">
      <ul>
        {/* {stockNames.map((stockname) => {
        const { name, symbol} = stockname;
        return (
            <li className="displaySearch" onClick={selectStock} key={symbol}>
                <p>{name} ({symbol})</p>
            </li>
        );
      })} */}
      </ul>
    </div>
  </div>
);

}

标签： javascriptreactjs

解决方案

您可以通过将selectedStock设置为 ES6 函数将其传递给 selectStock 函数。

见下文：

const selectStock = (selectedStock)=>{
setSearch("");
setCurrentStock(selectedStock);
}
return (
  <div className="searchContainer">
    <form className="searchBar">
      <input
        className="search"
        type="text"
        placeholder="Search Ticker Symbol"
        onChange={handleSearch}
      />
</form>
<div className="searchResults">
  <ul>
    {/* {stockNames.map((stockname) => {
    const { name, symbol} = stockname;
    return (
        <li className="displaySearch" onClick={()=>selectStock(stockName)} key={symbol}>
            <p>{name} ({symbol})</p>
        </li>
    );
  })} */}
      </ul>
    </div>
  </div>
);

如果需要，您可以以类似的方式传递其他变量。

推荐阅读