Question

使用下面的Ajax / jquery功能代码，我可以获得特定的用户消息计数，并且一切正常。

var userId='Nancy';

function handleUpdateCount(userId) {
  var count = (mCount[userId] == undefined) ? 1 : mCount[userId] + 1;
  mCount[userId] = count;
  $('#' + userId + ' label.mCount').html(count);
  $('#' + userId + ' label.mCount').show();

}

下面是我如何成功显示ajax结果。

<label class="mCount"></label>

现在，我重新编写了上面的ajax / jquery代码以与reactjs一起使用。所以我实现了下面的功能在React中可以正常使用，因为我可以在 setState（）方法中提醒计数器结果。

handleUpdateCount = (userId) => {
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
     mCount[userId] = count;


 this.setState({mCount: count});
// alert the result is working
 alert(this.state.mCount);

}

在render方法中，我知道我可以按照

获得结果

{this.state.mcount && <label>{this.state.mcount}</label> }

这是我的问题： 如何将剩下的两行Ajax代码行转换为reactjs等效项。

$('#' + userId + ' label.mCount').html(count);
$('#' + userId + ' label.mCount').show();

我是否需要在 reactjs 中执行以下代码？由于涉及到 userId ，因此上面的两行代码

if(userId){

 this.setState({mCount: count});
// alert the result is working
 alert(this.state.mCount);

}

更新部分

ajax或reactjs的 userId 来自按钮点击事件

在Reactjs中，您将拥有

<button
            onClick={() => this.handleUpdateCount(user.userId)}
          >{user.userId}</button>

在Ajax中是

usersList += '<li id="' + user.id + '"  onclick="handleUpdateCount(this, \'' + user.id + '\')"><a href="javascript:void(0)">' + user.name + '101</a></li>';

这是称为css的代码行

.mCount { color: #FFF; float: right; border-radius: 12px; border: 1px solid #2E8E12; background: #34BB0C; padding: 2px 6px; }

下面是有关如何将ajax函数写入Reactjs等效项的完整代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
     mCount: {},
    };

 this.handleUpdateCount = this.handleUpdateCount.bind(this);
  }

  componentDidMount() {

 this.setState({

      data: [
        { userId: "nancy101", name: "Nancy Mooree", info: "Hello from Nancy"},
 { userId: "joy106", name: "Joy Mooree", info: "Hello from Joy"}
      ]
    });


  }



handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
     mCount[userId] = count;

alert(count);

 this.setState({mssCount: count});
// alert the result is working
// alert(this.state.mssCount);

}





  render() {

    return (

          <div>
{this.state.mssCount}

{this.state.data.map((user, i) => {


if (user.userId !=='' && user.name !=='') {

          return (
            <div key={i}>
       <div>   
 {user.userId}: {user.name}

<br /><button
            onClick={() => this.handleUpdateCount(user.userId)}
          >{user.userId}</button>

            </div>
              </div>
          )


  } else {







  }
        })}



          </div>

    );
  }

Answer 1

我发现这是创建实现我的目标的功能的最佳方法。因为我正在使用nodejs和socket.Io。我找到了一种与userId一起发出用户计数的方法。下面的功能对我来说仍然完美。谢谢

handleUpdateCount = (userId) => {
alert(userId);
const {mCount} = this.state;

     var count = mCount[userId] == undefined ? 1 : mCount[userId] + 1;
     mCount[userId] = count;
 this.setState({mssCount: count});

}

如何将Ajax函数正确重写为Reactjs等效项

1 个答案: