如何修复 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-19i36this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedItem:null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; helpId: null&nbsp; &nbsp; &nbsp; &nbsp; };//showModal = (selectedItem) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: !this.state.show,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedItem&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; };//&nbsp; &nbsp; class Actions extends React.PureComponent {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; result: null,&nbsp; &nbsp; &nbsp; show: false,&nbsp; &nbsp; &nbsp; selectedItem: null,&nbsp; &nbsp; &nbsp; helpId: null&nbsp; &nbsp; };&nbsp; &nbsp; this.setSearchTopStories = this.setSearchTopStories.bind(this);&nbsp; &nbsp; this.showModal = this.showModal.bind(this);&nbsp; &nbsp; this.handleClickFromParent = this.handleClickFromParent.bind(this);&nbsp; &nbsp; this.onClose = this.onClose.bind(this);&nbsp; }&nbsp; onClose = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; show: false&nbsp; &nbsp; });&nbsp; };&nbsp; handleClickFromParent = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; show: !this.state.show&nbsp; &nbsp; });&nbsp; };&nbsp; showModal = selectedItem => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; show: !this.state.show,&nbsp; &nbsp; &nbsp; selectedItem&nbsp; &nbsp; });&nbsp; };&nbsp; setSearchTopStories(result) {&nbsp; &nbsp; this.setState({ result });&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; fetch(`${PATH_BASE}`)&nbsp; &nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; &nbsp; .then(result => this.setSearchTopStories(result))&nbsp; &nbsp; &nbsp; .catch(error => error);&nbsp; }&nbsp; render() {&nbsp; &nbsp; const { searchTerm, result, selectedItem } = this.state;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {result && result.length&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? result.map((item, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div onClick={() => this.showModal(item)}>{item.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : null}&nbsp; &nbsp; &nbsp; &nbsp; {selectedItem && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleClickFromParent={this.handleClickFromParent}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item={[selectedItem]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show={this.state.show}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClose={this.onClose}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YOLO&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default Actions;