Question

我真的很难学习反应，我不太明白如何解决这个问题。我有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;

template.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中显示它。

感谢您的帮助

Answer 1

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

将com.fasterxml.jackson.core.JsonParseException: Unexpected character ('p' (code 112)): expected a valid value (number, String, array, object, 'true', 'false' or 'null') at [Source: java.io.StringReader@9e3ef9; line: 1, column: 2]和Tournaments包裹在某个父组件中。然后，如果您点击任何特定锦标赛，您可以更改其状态ID。如果ID为null，则渲染锦标赛列表，如果定义了ID，则渲染锦标赛组件。这样你就会失去网址效应。
您可以在网址中将ID作为GET参数传递，然后在锦标赛组件中将其读取，因此您的代码看起来类似于此Tournament
您可以试用React Router来处理所有这些事情

Answer 2

我想你想把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 个答案: