Question

通过Reactjs -Jquery单击时，Unshift函数会创建其他按钮。

我从这个古老的网站 stackoverflow 取消了此代码。

我在一个阵列中有三个用户。这是在尝试让每个用户在单击其相应用户链接按钮时显示其弹出框。

为此，我目前尚不知道如何使用reactjs进行纯粹的操作，因此我通过添加以下代码将其与jquery结合起来

if ($.inArray(pid, this.state.data) != -1)
     {
      this.state.data.splice($.inArray(pid, this.state.data), 1);
     }
this.state.data.unshift(pid);


                var s = 270 ; // start position
        var j = 260;  //next position

        $.each( this.state.data, function( index, value ) {  
           if(index < 4){
             $('[rel="'+value+'"]').css("right",s);
             $('[rel="'+value+'"]').show();
             s = s+j;            
           }
           else{
             $('[rel="'+value+'"]').hide();
           }
        });

在 render方法中，按照下面的代码将rel设置为person.id的div

rel={person.id}

这是我的成就和问题：

当我单击每个用户按钮时，一切正常，并显示每个用户相应的弹出框，但此行的 Unshif（）功能下面的代码会导致显示一个额外的单击按钮。

this.state.data.unshift(pid);

这个额外的单击按钮，我不知道它从哪里来。因此，点击后将拥有六个用户，而不是拥有三个用户按钮。

我不知道是否它的jquery组合引起了reactjs的问题。有人可以帮我吗？

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
/*
const itemToPush = {
    id: Math.random().toString(36).substr(2, 16)

}
*/

class App extends Component {
  constructor() {
    super();

    this.state = {
      showBox: false,
data: [
        { id: "1", name: "user 1" },
        { id: "2", name: "user 2"},
        { id: "3", name: "user 3"}
      ],
    };

    this.showBox = this.showBox.bind(this);
    this.closeBox = this.closeBox.bind(this);
  }



  componentWillMount() {



}




showBox = (i, pid, name) => {

alert('you opened Box for User ' +pid);

// please uncomment the code below
/*
if ($.inArray(pid, this.state.data) != -1)
     {
      this.state.data.splice($.inArray(pid, this.state.data), 1);
     }
this.state.data.unshift(pid);


                var s = 270 ; // start position
        var j = 260;  //next position

        $.each( this.state.data, function( index, value ) {  
           if(index < 4){
             $('[rel="'+value+'"]').css("right",s);
             $('[rel="'+value+'"]').show();
             s = s+j;            
           }
           else{
             $('[rel="'+value+'"]').hide();
           }
        });

*/      

    //event.preventDefault();

    this.setState({ showBox: true }, () => {
     document.addEventListener('click', this.closeBox);
    });

  }

  closeBox(event) {

    if (this.dropdownBox.contains(event.target)) {
      this.setState({ showBox: false }, () => {
      document.removeEventListener('click', this.closeBox);
      });   

    }
  }
  render() {


var hidden = {
            display: this.state.shownToggle ? "none" : "block"
        }


    return (
      <div>


          <ul  style={{float: "right"}}>
            {this.state.data.map((person, i) => (

              <div className="chat-sidebar" key={i}>

                <button onClick={ () => this.showBox(i, person.id, person.name)}>
                 {person.name} Box</button>




        {this.state.showBox
            ? (



<div rel={person.id} style={{right: '270px',position: 'fixed', bottom:'-5px', width:'250px',background: 'white',borderRadius:'5px 5px 0px 0px'}}>
<div >
<div ref={(element) => {this.dropdownBox = element;}} style={{color: 'white',background: 'black'}}>Close</div>
 </div>
<div> <div style={{background: 'red',height: '100px'}}>Content will be here............<div ref={(element) => {this.dropdownBox = element;}} style={{color: 'blue'}}>Close</div></div>
</div>           
</div>
            ): (
              null
            )}



</div>

            ))}
          </ul>

      </div>
    );
  }
}

Arun Krish爵士的最新消息。...

Arun Krish先生，我更新了下面的代码以反映您的解决方案，但单击后仍然存在额外的三个弹出按钮的问题。

这就是发生的情况。最初，该应用程序具有代表三个用户的三个按钮。当我单击每个按钮时，将显示用户弹出框，但将为每个按钮显示一个附加的空按钮。

请您进一步帮助我。请问您可以将jquery代码替换为纯reactjs。谢谢下面是屏幕截图

从“反应”中导入React，{Component，Fragment}；从“ react-dom”导入{render}；从'axios'导入axios; // import'./style_chat.css';

const itemToPush = {
    id: Math.random().toString(36).substr(2, 16)

}


class ChatReact extends Component {
  constructor() {
    super();

    this.state = {
      showBox: false,
data: [
        { id: "1", name: "user 1" },
        { id: "2", name: "user 2"},
        { id: "3", name: "user 3"}
      ],
    };

    this.showBox = this.showBox.bind(this);
    this.closeBox = this.closeBox.bind(this);
  }
 componentWillMount() { 
}




showBox = (i, pid, name) => {
alert('you opened Box for User ..... ' +pid);

const dataSet = this.state.data;
  if ($.inArray(pid, dataSet) != -1)
   {
    dataSet.splice($.inArray(pid, this.state.data), 1);
    }
    dataSet.unshift(pid);
    var s = 270 ; // start position
    var j = 260;  //next position

    $.each( dataSet, function( index, value ) {  
       if(index < 4){
         $('[rel="'+value+'"]').css("right",s);
         $('[rel="'+value+'"]').show();

         s = s+j;   

       }
       else{
         $('[rel="'+value+'"]').hide();
       }
    });

    //event.preventDefault();

    this.setState({ showBox: true }, () => {

     document.addEventListener('click', this.closeBox);
    });

  }

  closeBox(event) {

    if (this.dropdownBox.contains(event.target)) {
      this.setState({ showBox: false }, () => {
      document.removeEventListener('click', this.closeBox);
      });   

    }
  }
  render() {


var hidden = {
            display: this.state.shownToggle ? "none" : "block"
        }


    return (
      <div>


          <ul  style={{float: "right"}}>
            {this.state.data.map((person, i) => (

              <div className="chat-sidebar" key={i}>

                <button onClick={ () => this.showBox(i, person.id, person.name)}>
                 {person.name} Box</button>




        {this.state.showBox
            ? (



<div rel={person.id} className="msg_box" style={{right: '270px',position: 'fixed', bottom:'-5px', width:'250px',background: 'white',borderRadius:'5px 5px 0px 0px'}}>
<div >
<div ref={(element) => {this.dropdownBox = element;}} style={{color: 'white',background: 'black'}}>Close</div>
 </div>
<div> <div style={{background: 'red',height: '100px'}}>Content will be here............<div ref={(element) => {this.dropdownBox = element;}} style={{color: 'blue'}}>Close</div></div>
</div>           
</div>
            ): (
              null
            )}



</div>

            ))}
          </ul>

      </div>
    );
  }
}

Answer 1

您可以将状态赋给变量，从而避免直接操纵状态

  const dataSet = this.state.data;
  if ($.inArray(pid, dataSet) != -1)
   {
    dataSet.splice($.inArray(pid, this.state.data), 1);
    }
    dataSet.unshift(pid);
      var s = 270 ; // start position
    var j = 260;  //next position

    $.each( dataSet, function( index, value ) {  
       if(index < 4){
         $('[rel="'+value+'"]').css("right",s);
         $('[rel="'+value+'"]').show();
         s = s+j;            
       }
       else{
         $('[rel="'+value+'"]').hide();
       }
    });
//event.preventDefault();

this.setState({ showBox: true }, () => {
 document.addEventListener('click', this.closeBox);
});

}

通过Reactjs -Jquery单击时，Unshift函数会创建其他按钮

1 个答案: