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对象（{}）很方便。

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

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

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

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

确保将索引传递到切换处理程序

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

检查转换组件的切换状态

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

我想在地图功能（例如点击切换

1 个答案: