反应显示哪个项目被点击答案

【问题标题】：React displaying which item was clicked反应显示哪个项目被点击
【发布时间】：2018-04-01 15:44:25
【问题描述】：

我很难学习反应，我不太明白如何解决这个问题。我有 Tournaments.js，它从 API 读取锦标赛名称并将它们显示为可点击的元素，并引用了 templates.js，我想在其中简单地显示被点击的元素的名称。

Tournaments.js：

import React, { Component } from "react";

const API = 'http://localhost:8080/api/tournaments';

class Tournaments extends Component {

  constructor() {
    super();
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch(API)
    .then((Response) => Response.json())
    .then((findresponse) => {
      console.log(findresponse)
      this.setState({
        data:findresponse,
      })
    })
  }

  testfun(e) {
    var target = e.target;
    console.log(target)
  }

  render() {
    return(
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron text-center">
              {
                this.state.data.map((dynamicData, key) =>
                <div>
                  <a key={dynamicData.id} href={"/#/template"} onClick={this.testfun}>{dynamicData.name}</a>
                </div>
                )
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Tournaments;

模板.js：

import React, { Component } from "react";
import Tournaments from "./Tournaments";

const API = 'http://localhost:8080/api/tournaments';

class template extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    }
  }

  render() {
    return(
      <div>
        <h1>clicked item</h1>
      </div>
    )
  }
}

export default template;

我的 API 存储数据如下：

[{"name":"abc","id":1,"organizer":"kla"},{"name":"fsdfs","id":2,"organizer":"fsdf"}]

我尝试使用 onclick 来获取被点击的值，但不知道如何在 template.js 中显示它。

感谢您的帮助

【问题讨论】：

把你的template.js放在Tournaments.js里面，把this.state. data写成props

标签： javascript html reactjs

【解决方案1】：

我认为您想将用户点击的项目从 Tournaments.js 中显示在 Template.js 中

您可以尝试将Template 放入Tournaments

Tournaments.js

import React, { Component } from "react";
import Template from './template';

class Tournaments extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      clickedData: []
    }
  }

  testfun(e) {
    var target = e.target;
    console.log(target);

    let newClickedData = [];
    newClickedData.push(target);
    this.setState({
       clickedData: newClickedData
    });
  }

  render() {
    return (
      <div>
        ...
        ...
        <Template clickedData={this.state.clickedData} />
      </div>
    );
  }

}
export default Tournaments;

Template.js

import _ from 'lodash';
import React, { Component } from "react";

class template extends Component {
  render() {
    let clickedData = this.props.clickedData;
    let displayClickedData = _.map(clickedData, (item) => {
      return <div>item</div>;
    });

    return(
      <div>
        {displayClickedData}
      </div>
    )
  }
}

export default template;

【讨论】：

【解决方案2】：

我建议选择以下选项之一：

将Tournaments 和Tournament 包装在某个父组件中。然后，如果您单击任何特定的锦标赛，您可以更改其状态 ID。如果 ID 为空，则呈现锦标赛列表，如果定义了 ID，则呈现锦标赛组件。这样一来，您将失去 URL 效果。
您可以在 URL 中将 ID 作为 GET 参数传递，然后在您的 Tournament 组件中读取它，因此您的代码看起来类似于 <a href={`/#/template?id=${dynamicData.id}`}>{dynamicData.name}</a>
您可以试用 React Router，它会为您处理所有这些问题

【讨论】：