Как установить React Component для события onClick () внутри div-элемента - PullRequest
Новая
       133

Как установить React Component для события onClick () внутри div-элемента

0 голосов
/ 20 марта 2020

У меня есть один React PureComponent, который делает некоторую выборку и после возвращает table(list of div's) div-элементов. Каждый div имеет внутри несколько элементов span.

Кроме того, у меня есть еще один компонент React, который должен открывать некоторые элементы HTML.

Я хочу установить 2nd React Component для события onClick() для каждого элемента div из 1st React PureComponent. Так что в идеальной ситуации он должен открыть мне некоторую род модальной страницы, когда я нажму на элемент div.

Теперь, похоже, ничего не произошло, когда я нажал на div элемент

1-й PureComponent 

import React, { Component } from "react";
import Modal from "../components/modal/form";

let test = {};

const PATH_BASE = "my url which works fine";

console.log("1st try Actions");
const i = 10;

class Actions extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      result: null,
      show: false
    };
    this.setSearchTopStories = this.setSearchTopStories.bind(this);
    this.showModal = this.showModal.bind(this);
  }
  showModal = e => {
    this.setState({
      show: !this.state.show
    });
  };
  setSearchTopStories(result) {
    this.setState({ result });
  }
  componentDidMount() {
    fetch(`${PATH_BASE}`)
      .then(response => response.json())
      .then(result => this.setSearchTopStories(result))

      .catch(error => error);
  }
  render() {
    const { searchTerm, result } = this.state;
    console.log("* Actions Pure*");
    console.log(result);
    console.log("=");

    return (
      <div>
        {result !== null
          ? result.map((item, index) => (
              <div
                onClick={() => (
                  <Modal onClose={this.showModal} show={this.state.show}>
                    Mdl--
                  </Modal>
                )}
              >
                <span>{item.name}</span>
                <span>{item.amount}</span>
              </div>
            ))
          : null}
      </div>
    );
  }
}

export default Actions;

2-й компонент 

import React from "react";
import Actions from "../../data/Actions";

export default class Modal extends React.Component {
  onClose = e => {
    this.props.onClose && this.props.onClose(e);
  };
  render() {
    console.log("KLICK");
    if (!this.props.show) {
      return null;
    }
    return (
      <div>
        <div>{this.props.children}</div>
        <div>
          <button
            onClick={e => {
              this.onClose(e);
            }}
          >
            Close
          </button>
        </div>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 20 марта 2020

вам нужно передать обработчик клика ребенку.

модальный компонент 

export class ModalComponent extends Component {
  handleChange = e => {
    // do something within component first
    console.log("clicked inside Modal component");

    // do something from parent
    this.props.handleClickFromParent(e, this.props.id);
  };

  render() {
    return (
      <div>
        <button id="demo" onClick={this.handleChange}>
          click me {this.props.id}
        </button>
      </div>
    );
  }
}

Компонент действий 

export class ActionsComponent extends Component {
  state = {
    clicked: 0
  };

  handleClickFromParent = (event, id) => {
    console.log(event, id);
    const clicked = id;
    this.setState({
      clicked
    });
  };

  render() {
    return (
      <div>
        <ModalComponent
          id={1}
          handleClickFromParent={this.handleClickFromParent}
        />
        <ModalComponent
          id={2}
          handleClickFromParent={this.handleClickFromParent}
        />
        {this.state.clicked}
      </div>
    );
  }
}

рабочий пример: https://codesandbox.io/s/black-morning-gqtiz

...