на кнопку возврата идентификатора, чтобы показать конкретные JSON реагировать

Question

У меня есть сетка ящиков, которые извлекают информацию о людях из JSON, у каждого ящика есть функция кнопки из компонента 'CZButton', эта кнопка включена в "список людей" и показывает всплывающее окно, которое я хочу показатьэлектронная почта этого человека во всплывающем окне, я не уверен, как я могу показывать уникальный элемент 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 компонента *1010* следующим образом:

<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>

Вот раздвоенная копия вашего исходного кода с упомянутыми выше обновлениями, которые вы можете попробовать.Надеюсь, это поможет!

Answer 2

В вашем PersonList компоненте, когда вы map каждый из ваших предметов, вы хотите отправить email предмета в качестве опоры на 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.В методе render вашего CZButton вам нужно, чтобы содержимое Drawer выглядело так:

<Drawer ...>
  <div>{this.props.email || "No email address for this person."}</div>
</Drawer>

Вы можете попробовать это, чтобы проверить, работает ли он для вас.