javascript - 在按钮上返回 id 以显示特定的 json react js

Question

我有一个盒子网格，可以从 JSON 中获取人们的信息，每个盒子都有一个来自组件“CZButton”的按钮功能，这个按钮包含在“personlist”中，它显示一个弹出窗口，我想显示弹出窗口中此人的电子邮件，我不确定如何在每次点击时显示唯一的 json 项目，无论我在弹出窗口中添加什么，它都会显示在所有按钮上，我想要的是显示有关此人的具体详细信息单击按钮后。我是新手，希望能得到帮助。这是一个沙箱片段。

https://codesandbox.io/s/r5kz3jx3z4?fontsize=14&moduleview=1

Answer 1

一个简单的解决方案是扩展 CZButton组件，以便它接受 person属性(property)，由person然后可以在弹出对话框中呈现数据:

/* Adapted from your codesandbox sample */
class CZButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  toggle = () => {
    let { toggle } = this.state;

    this.setState({ open: !this.state.open });
  };

  render() {
    const { open } = this.state;

    return (
      <div>
        {" "}
        <button onClick={this.toggle}>Show</button>
        <Drawer
          open={this.state.open}
          onRequestClose={this.toggle}
          onDrag={() => {}}
          onOpen={() => {}}
          allowClose={true}
          modalElementClass="modal"
          containerElementClass="my-shade"
          parentElement={document.body}
          direction="bottom" >
          {/* This render the contents of the `person` prop's `email` field in dialog */}
          <div>{this.props.person.email}</div>

          {/* This renders the contents of `person` prop in dialog */}
          <div>{JSON.stringify(this.props.person)}</div>
        </Drawer>
      </div>
    );
  }
}

看到你的 CZButton现在呈现 person 的内容prop，上面的更改还需要您在呈现 CZButton 时提供此数据在PersonList组件的 render()像这样的方法:

<div className="row">
      {console.log(items)}
      {items.map(item => (
        <Person
          className="person"
          Key={item.id.name + item.name.first}
          imgSrc={item.picture.large}
          Title={item.name.title}
          FName={item.name.first} >
          {/* Pass the "person item" into our new person prop when rendering each CZButton */ }
          <CZButton person={item} />
        </Person>
      ))}
    </div>

Here is a forked copy of your original code上面提到的更新供您试用。希望这对您有所帮助!