javascript - 在.map呈现的元素中仅切换1个元素

Question

你好，当点击按钮打开一个下拉菜单时出现了一些问题，它将打开所有渲染的图像，但是我只想在该元素上打开

这是要素

     <div key={item.name} style={this.state.bierenToggle ? {display:'flex'} : {display:'none'}} className={'bieren-lijst'}>

这是功能：

  handleBierenLijst(){
      console.log('hello')
    this.setState({bierenToggle : !this.state.bierenToggle},()=>console.log(this.state))
  }

这是完整的渲染功能：

 handleBierenLijst(){
      console.log('hello')
    this.setState({bierenToggle : !this.state.bierenToggle},()=>console.log(this.state))
  }


  renderResults(data) {
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    let now = new Date();
    let self = this

    let temp = data.filter((item => {
      return parseFloat(item.distance, 10) <= parseFloat(self.props.filterData, 10);
    }));
    let output = temp.map((item) => {
      let closingSign = item.open.indexOf(days[now.getDay()]) !== -1 ? {opacity:'1'} : {opacity: '0'};
      return (
        <li key={item.name}>
          <div className={'head-title'}>
            <h1>{item.name}</h1>
            <h2>{`${item.distance}km`} </h2>
          </div>
          <div className={'address'}>
            <p>{item.address}</p>
            <p>{item.zipcode}</p>
            <p>{item.city}</p>
          </div>
          <div className={'bottom-container'}>
            <div style={closingSign} className={'open-closed'}>gesloten</div>
            <div className={'bieren'} onClick={()=>this.handleBierenLijst()}>bieren</div>
          </div>
          <div key={item.name} style={this.state.bierenToggle ? {display:'flex'} : {display:'none'}} className={'bieren-lijst'}>
            <div>jupiter</div>
            <div>heiniken</div>
            <div>amstel</div>
            <div>grolsch</div>
          </div>
        </li>
      )
    })
    return output
  }

这是完整文件：

import React from 'react';
import './results.css';

class Results extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      resultList: [],
      bierenToggle: false
    }
  }


  handleBierenLijst(){
      console.log('hello')
    this.setState({bierenToggle : !this.state.bierenToggle},()=>console.log(this.state))
  }


  renderResults(data) {
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    let now = new Date();
    let self = this

    let temp = data.filter((item => {
      return parseFloat(item.distance, 10) <= parseFloat(self.props.filterData, 10);
    }));

    let output = temp.map((item) => {
      let closingSign = item.open.indexOf(days[now.getDay()]) !== -1 ? {opacity:'1'} : {opacity: '0'};
      return (
        <li key={item.name}>
          <div className={'head-title'}>
            <h1>{item.name}</h1>
            <h2>{`${item.distance}km`} </h2>
          </div>
          <div className={'address'}>
            <p>{item.address}</p>
            <p>{item.zipcode}</p>
            <p>{item.city}</p>
          </div>
          <div className={'bottom-container'}>
            <div style={closingSign} className={'open-closed'}>gesloten</div>
            <div className={'bieren'} onClick={()=>this.handleBierenLijst()}>bieren</div>
          </div>
          <div key={item.name} style={this.state.bierenToggle ? {display:'flex'} : {display:'none'}} className={'bieren-lijst'}>
            <div>jupiter</div>
            <div>heiniken</div>
            <div>amstel</div>
            <div>grolsch</div>
          </div>
        </li>
      )
    })
    return output
  }


  render() {
    console.log("pppprrrrooooopppsss", this.props.filterData)
    let content = this.renderResults(this.props.resultData)
    console.log(this.state)
    return (
      <div>
        <div className={'results'}>
          <ul>
            {content}
          </ul>
        </div>
      </div>
    )
  }
}

export default Results;

Answer 1

好的，让我首先解释问题，当应用程序加载时，您现在的处理方式就是您的状态

 {
   resultList: [],
   bierenToggle: false
 }

像@ChrisG这样的问题是您的状态只有一个布尔值，不能容纳多个项目的状态。解决问题的一种方法是不保留布尔值，而是维护项目位置列表。在这种情况下，您的代码将变成

constructor(props) {
super(props)
this.state = {
    resultList: [],
    bierenToggleList: [],
  }
}

...

handleBierenLijst(itemIndex){
  console.log('hello');
  let currentList = this.state.bierenToggleList;
  let listPosition = currentListt.indexOf(itemIndex);
  if (listPosition === -1) {
     // item is not toggled
     currentList.push(index);
  } else {
     // item is already toggled, remove it
     currentList = currentList.splice(listPosition, 1);
  }
  this.setState({
    bierenToggleList: [...currentList], // make sure to use ...
  })
  ()=>console.log(this.state));
}

...

renderResults(data) {
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let now = new Date();
let self = this

let temp = data.filter((item => {
  return parseFloat(item.distance, 10) <= parseFloat(self.props.filterData, 10);
}));

let output = temp.map((item, itemIndex) => {
  let isToggled = this.state.bierenToggleList.indexOf(itemIndex) !== -1;
  let closingSign = item.open.indexOf(days[now.getDay()]) !== -1 ? {opacity:'1'} : {opacity: '0'};
  return (
    <li key={item.name}>
      <div className={'head-title'}>
        <h1>{item.name}</h1>
        <h2>{`${item.distance}km`} </h2>
      </div>
      <div className={'address'}>
        <p>{item.address}</p>
        <p>{item.zipcode}</p>
        <p>{item.city}</p>
      </div>
      <div className={'bottom-container'}>
        <div style={closingSign} className={'open-closed'}>gesloten</div>
        <div className={'bieren'} onClick={()=>this.handleBierenLijst(itemIndex)}>bieren</div>
      </div>
      <div key={item.name} style={isToggled ? {display:'flex'} : {display:'none'}} className={'bieren-lijst'}>
        <div>jupiter</div>
        <div>heiniken</div>
        <div>amstel</div>
        <div>grolsch</div>
      </div>
    </li>
  )
})
return output

}

我目前无法测试此代码，但是它应该或多或少地起作用，如果您有任何问题或疑问，我将很乐意为您提供帮助。