javascript - 需要触发通过映射函数reactjs编写的元素数组中的单个元素

Question

class Services extends Component {
    constructor(props) {
        super(props);
        this.state = {showoffer: false};
      }
      showOffers=( )=>{  
        this.setState({showoffer: !this.state.showoffer});
      }
    render() {  
        return (
            <div className="OSServicesContainer">
            <img className="OSlogomark" src={logomark} alt="logo mark" />
                <article className="OssHeadingText">OOM INTERIORS OFFERS</article>
                {offersdata.map((offers,index)=>{
                return   ( <div key={index} className="OssoffersContainermain">
                                <div className="OssoffersContainer">
                                    <div className="OssofferHeadingmain">
                                        <article className="OssofferHeading">{offers.heading}</article>
                                    </div> 
                                        <article className="OssofferText">{offers.subheading}</article> 
                                    <div className="OssofferViewbtnmain">
                                        <article key={index} className="OssofferViewbtn" onClick={this.showOffers}>{this.state.showoffer?"View Less":"View More"}</article>
                                    </div>
                                </div>
                                {!this.state.showoffer?
                                    null:
                                <div className="OssOfferSubCompmain">
                                    {offers.offersub.map((offer,key) =>{
                                        return <OssOfferSubComp ofrtext={offer.text} ofrsubtext={offer.subtext} />
                                    })}
                                </div>}
                            </div>    
                                )
                })}
            </div>);
    }
}

export default Services;

上面是我的代码 我想调用 showoffer 函数并仅更新单击的元素 请问我该怎么做才能触发所有元素 如何触发单个元素？？

Answer 1

你可以试试这样: `类服务扩展组件{ 构造函数( Prop ){ super ( Prop )； this.state = {showoffer: 0};

    showOffers = ( offerIndex ) => {  
        this.setState({showoffer: offerIndex});
    }

    hideOffers = () => {
        this.setState({showoffer: 0});
    }

    render() => {
       ... 
       <div className="OssofferViewbtnmain">
           <article key={index} onClick={ () => this.showOffers(index) }> 
               {this.state.showoffer?"View Less":"View More"}
           </article>
       </div>
       ...
       { 
           this.state.showOffer && this.state.showOffer === index
           ? // then show it
           : ''
        }
    }`