Question

onClick事件适用于所有元素，我已尝试推出点击事件但无法解决任何帮助将不胜感激

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { itemsFetchData,toggleDiv } from '../actions/sidenavaction';

class SideNavItem extends Component {
    componentDidMount() {
        this.props.fetchData('http://58f5d2ccc9deb71200ceecef.mockapi.io/nav');
    }


    render() {

        var Nest=function(par) {
            const numbers = par.itemized;
            const listItems = numbers.map((number) => <li key={number.sid}>{number.svalue}</li>);
            return (<ul>{listItems}</ul>);
        };



        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }

        return (
            <ul>{this.props.items.map((item) =>         
                <ul key={item.id}  onClick={this.props.toggleDiv.bind(this,item.id)}><a href="#">
                {item.value}</a>
                {item.sub && <div style={{display: this.props.hidden ? 'block' : 'none'}}><Nest itemized={item.sub} /></div>}           
                </ul>               
            )}
            </ul>
        );          
    }
}

如何将onClick功能移出地图功能

更新

行动

export function toggleDiv(id){
    return {
      type: 'TOGGLE_DIV',
      id:id
    };
}

onClick的缩减器

export function toggleDivReducer(state = { hidden: true}, action){
    switch(action.type) {
        case 'TOGGLE_DIV':
            return Object.assign({}, state, {hidden: !state.hidden,id: action.id});
        default:
            return state;
    }
}

Answer 1

好的，问题出现在toggleDivReducer和this.props.hidden在组件中的使用方式

export function toggleDivReducer(state = { hidden: true}, action) { 
  switch(action.type) {
    case 'TOGGLE_DIV':
      return Object.assign({}, state, {hidden: !state.hidden,id: action.id});
    default:
      return state;
  }
}

和

{item.sub && <div style={{display: this.props.hidden ? 'block' : 'none'}}><Nest itemized={item.sub} /></div>}

首先，三元似乎是向后的（隐藏时为display: 'block'？），所以为了简单起见，我会假设情况就是这样，并谈论在hidden时显示项目{答案false。

您还没有提供mapStateToProps功能，但我只能假设它看起来像

function mapStateToProps(state) {
  return {
    items: [/* from some other reducer */],
    hidden: state.toggleDivReducer.hidden
  }
}

问题在于它并不关心隐藏哪个项ID，如果hidden标志切换，将显示所有子项（您正在观察的行为）。

现在有两种方法可以设想组件的行为：

子菜单可以独立切换
切换子菜单将关闭其他已经打开的子菜单

解决方案1。

将toggleDivReducer更改为

export function toggleDivReducer(state = {}, action){ 
  switch(action.type) {
    case 'TOGGLE_DIV':
      return Object.assign({}, state, {[action.id]: !state[action.id]});
    default:
      return state;
  }
}

这会将可见状态存储在id中。 注意：重要的是要将逻辑翻转为存储visible而不是hidden，因为我们希望隐藏默认值，但默认值为false （因为该州最初没有ids。

然后将mapStateToProps更改为

function mapStateToProps（state）{ 返回{ items：[/ *来自其他一些reducer * /]， visibleItems：state.toggleDivReducer } }

然后用法就像

{item.sub && <div style={{display: this.props.visibleItems[item.id] ? 'block' : 'none'}}><Nest itemized={item.sub} /></div>}

解决方案2.

将toggleDivReducer更改为

export function toggleDivReducer(state = { hidden: true }, action){ 
  switch(action.type) {
    case 'TOGGLE_DIV':
      return Object.assign({}, state, {hidden: !state.hidden && state.id == action.id, id: action.id});
    default:
      return state;
  }
}

如果是以前切换的项目，则只会将隐藏标志设置为false。

然后将mapStateToProps更改为

function mapStateToProps(state) {
  return {
    items: [/* from some other reducer */],
    activeItem: state.toggleDivReducer
  }
}

然后用法就像

{item.sub && <div style={{display: this.props.activeMenu.id == item.id && !this.props.activeItem.hidden  ? 'block' : 'none'}}><Nest itemized={item.sub} /></div>}

这个问题可能还有其他解决办法，但现在你知道原因了，你可以自己调查一下。

与往常一样，变量的确切名称完全取决于您，我只选择了对我有用的东西。

带来点击地图功能

更新

1 个答案:

解决方案1。

解决方案2.