我想在地图功能中创建一个单独的过程，例如点击切换

Question

我想在地图功能中单击的每个 div 上进行按钮切换，但按钮切换 单击一次即可完成整个潜水（我想让每次单击都只在我单击的 div 上切换一个按钮，而不是全部）...................... ..................................................... .........................

import React,{Component}  from 'react'
import './course.css'
import Downloadcourse from './../download/down.js'
import {Transition,animated} from 'react-spring/renderprops'

class Course extends Component{
    constructor(){
        super();
        this.state={
            search:'',
            showcomponent:false,
        };
        
    }
    updatesearch=(e)=>{
        this.setState({search:e.target.value.substr(0,20)});
    }
    
    downtoggle=(index)=>{
        
        this.setState({showcomponent:!this.state.showcomponent})
    }
  render(){
      let filteredcontacts= this.props.corses.filter(
      (item)=>{
          return item.name.toLowerCase().indexOf(
              this.state.search.toLowerCase()) !== -1 ;
          
      }) ;
      let length= this.props.corses.length;
      const courselist=length ?(
       filteredcontacts.map((item,index)=>{
         return (
       <div className="col-sm-3 cat" key={item.id}>
       <div className="maincover" >
      <div className="mainimg" onClick={this.downtoggle}>
      </div>
      <div className="maincorse">
      <div className="row course-title">
      <h1 className="course-Name">{item.name}</h1> 
      </div>
      <div className="row course-title">
      <button className="removeing" onClick={()=>{this.props.deleteing(index)}}>Remove 
      Course</button>
      </div>
      <div className="row download">
      <Transition
        native
         items={this.state.showcomponent}
          from={{ position: 'absolute', overflow: 'hidden', height: 0 }}
            enter={[{ height: 'auto' }]}
            leave={{ height: 0 }}>
            {show=>show &&(props=>(
            <animated.div style={props}>
                <Downloadcourse />          
            </animated.div>               
                           ))}
      </Transition>
      </div>
      </div>
       </div>
       </div> 
  )}
      )) :(
          <div className="no-content">
          <h2>no content to show</h2>
          </div>
         )
      return(

    <div className="course">
      <input type="text" className="input-search" onChange={this.updatesearch}/>
      <span className="magnficant"> &#128269;</span>
    <div  className="row category">
     {courselist}
</div>
    </div>
  )
}
}

export default Course;
                        
                        

Answer 1

要使多个元素可切换，您需要将每个元素的切换状态存储在 some 数据结构中。一个 javascript 对象 ({}) 会派上用场。

1. 将this.state.showComponent 从布尔值转换为对象

    this.state={
      search: '',
      showComponent: {},
    };
   

2. 使用传递给切换处理程序的索引来更新切换状态

    downtoggle = (index) => {
      this.setState(prevState => ({
        showComponent: {
          ...prevState.showComponent, // <-- spread existing state
          [index]: !prevState.showComponent[index], // <-- toggle value
        },
      }));
    }
   

3. 确保将索引传递给切换处理程序

    onClick={() => this.downtoggle(index)}
   

4. 检查转换组件的切换状态

    <Transition
      // ... other props
      items={this.state.showComponent[index]} // <-- truthy/falsey
    />