Блог

Главная - Вопросы по программированию - React/JS Как бы я назначил определенный сопоставленный элемент состоянию?

React/JS Как бы я назначил определенный сопоставленный элемент состоянию?

#javascript #reactjs

Вопрос:

Мой компонент поиска возвращает сопоставленный список результатов на основе входных данных. В зависимости от выбранного элемента списка я хочу назначить его своему текущему состоянию запасов, но я не уверен, как бы я получил доступ к этому конкретному элементу.

 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>
);

}

Комментарии:

1. Каррирование-хороший вариант или просто передача анонимной функции. onClick={() => selectStock(stockname)}

Ответ №1:

Во-первых, вы захотите изменить свою selectStock функцию, чтобы она принимала stockName значение, на которое она должна быть установлена. Это должно быть передано вашей setCurrentStock функции:

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

Затем передайте onClick функцию со стрелкой в функцию для выбранной строки:

 <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>

Это, по сути, создает новую функцию для каждой строки, которая специфична для нее самой. Когда эта строка нажата, она запускает свой собственный уникальный onClick , который передает свое собственное stockname значение selectStock .

Ответ №2:

Вы можете передать выбранный запас в функцию selectStock, сделав ее функцией ES6.

Смотреть ниже:

 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>
);

При необходимости вы можете передать другие переменные аналогичным образом.

Метки: