Question

我需要从用户列表中单击用户，以显示有关它的更多信息。现在显示一个随机用户。我需要获取其索引并进行比较吗？帮助了解并找到正确的信息，这将有助于理解这一点

        {this.props.testStore.map((arrayItem, index) =>
              <Grid >
                  <Grid.Column mobile={16} tablet={6} computer={5}>
                      <Image src={randomUser.general.avatar} />
                  </Grid.Column>
                  <Grid.Column mobile={16} tablet={10} computer={11}>
                      <h2>{`${randomUser.general.firstName} ${randomUser.general.lastName}`}</h2>
                      <h3>Company: {randomUser.job.company}</h3>
                      <h3>Position: {randomUser.job.title}</h3>
                      <h4>
                          Contact:
                          <p><Icon name='mail' size='small' /> <a href="mailto:Gerry_Hackett77@gmail.com">{randomUser.contact.email}</a></p>
                          <p><Icon name='phone'  size='small' /> <a href="tel:8959840132">{randomUser.contact.phone}</a></p>
                      </h4>
                      <p><strong>Address:</strong> {`${randomUser.address.street}, ${randomUser.address.city}, ${randomUser.address.country}`}</p>
                  </Grid.Column>
              </Grid>
          )}

与用户testStore

const randomUser = this.props.testStore[8];

这是我的示例代码，更详细-> here

Answer 1

您可以将index（或用户id（如果有的话））传递给this.handleClick。
然后，您可以在处理程序中进行设置：

  handleClick(selectedIndex) {
    this.setState({ selectedIndex });
  }

然后在您的渲染器中：

  render() {
    const { selectedIndex } = this.state;
    const randomUser = this.props.testStore[selectedIndex];
...

但是不要忘记在构造函数中有一个初始值：

  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
      show: true
    };
    this.searchHandler = this.searchHandler.bind(this);
  }

Answer 2

您可以在handleClick函数上传递arrayItem

onClick={() => {
  this.handleClick(arrayItem);
  this.toggleAside();
}}

然后将setState置于handleClick上

handleClick = arrayItem => {
  this.setState({ selected: arrayItem });
};

，然后从呈现方法的状态中获取所选用户，并显示所需的信息。

const randomUser = this.state.selected;

并仅显示该用户

{randomUser &&
  // code to display here
}

单击如何获取该用户的数据？

2 个答案: