如何修复onClick元素。 ReactJS

Question

我是ReactJS的新手，我有几个问题。我定义了函数showModal，但是console.log()和this.setState({show:!this.state.show});。之后，我将此函数onClick事件应用于map函数中的div元素。第一个问题：当我单击div元素showModal时，在控制台中看不到我的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}
                        handleClickFromParent = {this.handleClickFromParent}
                        item = {[item]}
                        show = {this.state.show}
                        onClose = {this.onClose}
                    >
                        YOLO
                    </Modal>
                    </div>
                )  
                : null 
            }

        </div>)
    }
}

export default Actions;

Answer 1

选择u时可以在方法上传递项目，在单击u时可以设置项目值。请检查以下代码。

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;