Question

我只在一个项目中滑动菜单有问题。

当我点击配置按钮时，每个项目都显示菜单。我试图通过传递道具{mail.id}找出一些东西，但我恐怕我不明白这一点。

我想在一个项目中点击滑动菜单 - 点击一个。

这是ConfigButton

import React, { Component } from "react";
import './Menu.css';

class ConfigButton extends Component {
  render() {
    return (
      <button className="configButton"
        onClick={this.props.onClick}
      >
        <i className="configButtonIcon fas fa-cog"></i>
      </button>
    );
  }
}

export default ConfigButton;

这是Component呈现：

import React, { Component } from 'react';
import { NavLink, HashRouter } from 'react-router-dom';
import axios from 'axios';
import Menu from './Menu';
import ConfigButton from './ConfigButton';

const API = myAPI;

const navLinkStyle = {
  textDecoration: 'none',
  color: '#123e57'
};

class Emails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      mails: []
    };

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  handleMouseDown(e) {
    this.toggleMenu();
    e.stopPropagation();
  }

  toggleMenu() {
    this.setState({
      visible: !this.state.visible
    });
  }

  componentDidMount() {
    axios.get(API)
      .then(response => {
        const mails = response.data;
        this.setState({ mails });
      })       
  }

  truncate = (text, chars = 140) =>
    text.length < chars ? text : (text.slice(0, chars) + '...')

  render() {

    let mails = this.state.mails;
    console.log(mails);

    mails = mails.map(mail => {
      return (
        <div key={mail.id}>
          <div className='mail'>

            {
              !mails.displayed
              ? <i className="notDisplayed fas fa-circle"></i>
              : <i className="displayed far fa-circle"></i>
            }

            <HashRouter>
              <NavLink
                to={`/openemail/${mail.id}`}
                style={navLinkStyle}
              >
                <ul className='ulMailWrap'>
                  <div className='mailHeader'>
                    <li>{mail.sender}</li>
                    <li>{mail.created}</li>
                  </div>
                  <li>{mail.subject}</li>             
                  <li>{this.truncate(mail.message)}</li>
                </ul>
              </NavLink>
            </HashRouter>

            <ConfigButton onClick={this.handleMouseDown} />
            <Menu handleMouseDown={this.handleMouseDown}
              menuVisibility={this.state.visible}
            />
          </div>
        </div>
      )   
    });

    return (
       <div>
         { mails }
       </div>
    );
  }
}

export default Emails;

Answer 1

您可以传递一个函数，该函数将向处理程序发送不同的参数，具体取决于数组中每个元素的值。

做这样的事情：

...
<div key={mail.id} onClick={() => this.handleOpenMenu(mail.id)}>
...

然后在处理程序：

handleOpenMenu = id => {
  // do different stuffs on the id you get here 
  this.setState({ visibleMenuId: id });
}

然后更改传递给菜单组件的道具：

<Menu menuVisibility={this.state.visibleMenuId === mail.id} />

React - 单击迭代项目中的一个项目时显示菜单

1 个答案: