Question

当前有一个项目列表，我想在单击某个项目时显示有关该项目的数据，我尝试通过创建一个将该项目的ID传递给另一个组件的按钮来尝试，但它不起作用

渲染代码：-

return(

    <div className="mainn">
    <div>
      <h4>Toilet Search:</h4>
      <form>
        <input type="text" onChange={this.searchHandler}/>
      </form>
      <h3>List of Toilets</h3>
      <table  className="gfg">
        <tr className="head">
          <th>Toilet ID  </th>
          <th>Toilet's Location  </th>
          <th>GeoLocation</th>
        </tr>
        {toilet.filter(searchingFor(this.state.term)).map(developer => (
            <div
              key={developer.uid}
              className="card"        
            >      
                <tr>
                <td className="tid">{developer.tid}</td>  
                <td className="loc" onClick={<Graph />}>{developer.location}</td>
                <button onClick={<Graph tid={developer.tid}/>}>Data</button>
                <td>{developer.geoLoc}</td>
                </tr>

           </div>
            ))}
      </table>               
          </div>
    </div>      
    )
  }
}

Answer 1

您无法通过其他组件的onClick呈现组件onClick 您应该设置要显示为状态的项目，然后使用

将其传递给该组件

更改此行

<button onClick={<Graph tid={developer.tid}/>}>Data</button>

到

<button
    onClick={() => this.setState({
        selectedDeveloperId:developer.tid
    })}
>
    Data
</button>

现在，如果您单击该按钮，它将在组件状态下设置开发人员ID

并在关闭表标签后的render方法中放置

{!!selectedDeveloperId && (<Graph tid={selectedDeveloperId}/>)}

因此，如果您单击具有所选开发者ID的按钮，它将呈现Grap组件

如何在React中使用onClick将值从一个组件传递到另一个组件

1 个答案: