时间戳

首页 > 解决方案 > React.js - 完成了呈现所有项目的 API 提取，现在我希望能够使用 JSON 信息将每个项目路由到他们的“自己的”页面

javascript - React.js - 完成了呈现所有项目的 API 提取，现在我希望能够使用 JSON 信息将每个项目路由到他们的“自己的”页面

问题描述

我创建了一个 React 站点，该站点在页面上的 API Fetch 中呈现所有项目。我现在想要的是能够按下呈现的每个项目并能够路由到显示有关该项目的“更多”信息的新组件。

下面我有以下代码，其中包含可用于搜索所有项目或特定项目的“输入”。

  const AgentSearch = (e) => {
       e.preventDefault();

       function capitalizeName(input) {
           return input.replace(/\b(\w)/g, (s) => s.toUpperCase());
       }

       console.log('you hit search', input);
       dispatch({
           type: actionTypes.SET_SEARCH_TERM,
           term: capitalizeName(input),
       });
       //do something with input

       history.push('/findagent');
   };
   return (
       <form className='search'>
           <div class='search__input'>
               <SearchIcon className='search__inputIcon' />
               <input value={input} onChange={(e) => setInput(e.target.value)} />
           </div>

这是呈现所有项目的代码：

       eachName = data.map((item) => {
            return (
                <tr>
                    <td class='text-left'>{item.name}</td>
                    <td class='text-left'>{item.agency}</td>
                </tr>
            );
        });

基本上我想做的是“捕获” {item.name} 并将其放入新查询中，一旦您在创建的列表中按下该项目。

我尝试创建一个覆盖整个类的按钮，然后将 {item.name} 作为输入，但这不起作用，还尝试创建一个“假”输入窗口，其中存储了每个项目的 {item-name}在列表中，即使 {item-name} 进入输入窗口，一旦我按下它所连接的按钮，它就会说它没有任何价值。

有谁知道这有什么干净的想法？我是 React 的新手，所以这可能真的很容易，哈哈。

谢谢！

标签： javascriptreactjsapiroutes

解决方案

最简单的方法是onCLick在td. 请参阅下面的代码。

const eachName = data.map((item) => {
    return (
        <tr>
            <td class='text-left' onClick={() => handleNameClick(item.name)}>{item.name}</td>
            <td class='text-left'>{item.agency}</td>
        </tr>
    );
});

您可以定义handleNameClick函数。你会得到item.name作为参数。见下文。

const handleNameClick = itemName => {
    //your code to send request for the clicked name
}

推荐阅读