Question

我有一个框的网格，该框从JSON中获取人们的信息，每个框都有一个来自组件“ CZButton”的按钮功能，此按钮包含在“ personlist”中，它显示一个弹出窗口，我想显示该人员的电子邮件在弹出窗口中，我不确定如何在每次单击中显示一个唯一的json项目，无论我在弹出式窗口中添加的所有按钮上显示的内容如何，我想要显示的是该人员的特定详细信息单击按钮后。我是新来的反应者，将不胜感激。这是一个沙盒摘要。

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

Answer 1

一个简单的解决方案是扩展CZButton组件，使其接受person属性，然后可以在弹出对话框中呈现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道具的内容，上述更改还要求您在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，其中包含上述更新，供您试用。希望这会有所帮助！

Answer 2

在{ "data": { "daniel": { "name": "dani", "lastName": "sss", "email": "s@hotmail.com", "password": "12345" } } }组件中，您要像每个PersonList一样，将项目的map作为道具发送到email，如下所示：< / p>

CZButton

现在，每个{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} > {" "} <CZButton email={item.email} /> </Person> ))}都会获得一个名为CZButton的道具。在email的{{1}}方法中，您将希望render的内容看起来像这样：

CZButton

您可以尝试一下，看看它是否适合您。

按钮返回ID以显示特定的json react js

2 个答案: