如何修复 onClick 元素。反应JS

Question

我是 ReactJS 的新手，我有几个问题。我定义了函数showModal和但console.log()和 this.setState({show:!this.state.show});。之后，我为地图函数中的 div 元素应用了这个函数 onClick 事件。第一个问题：当我点击 div element showModalwork 但在控制台中我看不到我的console.log.第二个问题：我想当你点击一个 div 元素时，它必须添加/显示几个新的 div 元素，但仅限于一个 div 元素（我点击了它）。但是现在当我单击一个 div 元素时，它会为所有具有此showModal功能的 div 元素添加/显示新元素。我怎样才能解决这个问题import React, { Component } from "react";import Modal from '../components/modal/form'const DEFAULT_QUERY = 'redux';const PATH_BASE = 'URL which work correct';class Actions extends React.PureComponent{    constructor(){        super();        this.state = {            result:null,            show:false,            helpId:null        };        this.setSearchTopStories = this.setSearchTopStories.bind(this);        this.showModal = this.showModal.bind(this);        this.handleClickFromParent = this.handleClickFromParent.bind(this);        this.onClose = this.onClose.bind(this);    }    onClose = e => {        this.setState({ show: false});    }    handleClickFromParent = e => {        this.setState({show: !this.state.show});    }    showModal = e => {            console.log('BABE');            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>                    <div onClick={()=>this.showModal()}>{item.name}</div>                    <Modal                         id = {index}

Answer 1

选择时您可以传递 item on 方法，单击时您可以设置 item 值。请检查以下代码。

演示： https ://codesandbox.io/s/stackoverflowmodal-19i36

this.state = {

          result: null,

          show: false,

          selectedItem:null,

          helpId: null

        };

//

showModal = (selectedItem) => {

        this.setState({

          show: !this.state.show,

          selectedItem

        });

      };

//

    class Actions extends React.PureComponent {

  constructor() {

    super();

    this.state = {

      result: null,

      show: false,

      selectedItem: null,

      helpId: null

    };

    this.setSearchTopStories = this.setSearchTopStories.bind(this);

    this.showModal = this.showModal.bind(this);

    this.handleClickFromParent = this.handleClickFromParent.bind(this);

    this.onClose = this.onClose.bind(this);

  }

  onClose = e => {

    this.setState({

      show: false

    });

  };

  handleClickFromParent = e => {

    this.setState({

      show: !this.state.show

    });

  };

  showModal = selectedItem => {

    this.setState({

      show: !this.state.show,

      selectedItem

    });

  };

  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, selectedItem } = this.state;

    return (

      <div>

        {result && result.length

          ? result.map((item, index) => (

              <div>

                <div onClick={() => this.showModal(item)}>{item.name}</div>

              </div>

            ))

          : null}

        {selectedItem && (

          <Modal

            id={index}

            handleClickFromParent={this.handleClickFromParent}

            item={[selectedItem]}

            show={this.state.show}

            onClose={this.onClose}

          >

            YOLO

          </Modal>

        )}

      </div>

    );

  }

}

export default Actions;