从下拉菜单中选择后更新页面的多个部分

Question

我目前在页面上有一些php部分，一旦从下拉列表中选择用户，我就会对其进行更新。我不知道如何更新页面的另一部分。

JS代码

<script>
function UserInfo(str) {
  var contentHolder = document.getElementById("txtHint").innerHTML;
    if (str == "0") {
        document.getElementById("txtHint").innerHTML = "<div class=\"text-center\">Please choose a user</div>";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("POST","cuser.php",true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send("inputUser="+str);
    }
}
</script>

页面上的PHP部分

<div class="form-body" id="txtHint">
<div class="text-center"><h4 class="form-actions top"><i class="ft-user"></i> <span id="act_title">User Info</span></h4></div>
<div class="row mb-2">
  <div class="col-md-12">
    <div class="form-group">
      <table class="table table-striped">
        <tbody>
          <tr>
            <th class="text-nowrap" scope="row">Full name</th>
            <td> - </td>
          </tr>
          <tr>
            <th class="text-nowrap" scope="row">User Status</th>
            <td> - </td>
          </tr>
          <tr>
            <th class="text-nowrap" scope="row">Email</th>
            <td> - </td>
          </tr>
          <tr>
            <th class="text-nowrap" scope="row">Phone Number</th>
            <td> - </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

cuser.php文件

$return = '
<div class="text-center"><h4 class="form-actions top"><i class="ft-user"></i> <span id="act_title">User Info</span></h4></div>
<div class="col-md-12">
<div class="form-group">
  <table class="table table-striped">
    <tbody>
      <tr>
        <th class="text-nowrap" scope="row">Full name</th>
        <td> '.$username.' </td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">User Status</th>
        <td> '.$userstatus.' </td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">Email</th>
        <td> '.$useremail.' </td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">Phone Number</th>
        <td> '.$userphone.' </td>
      </tr>
    </tbody>
  </table>
</div>
</div>';
echo $return;

我不确定这是否是最好的方法，但是现在每次我从下拉菜单中选择用户时，我都会获得上面的信息。事情是我也想更新一个额外的下拉菜单，但是我不知道如何创建cuser2.php文件。

Answer 1

此问题与React无关。您正在尝试调整String变量，但没有使用更新后的值重新分配它。

String类型是不可变的。不可变意味着它们不可更改。每次您想进行更改时，都需要使用一个全新的字符串重新分配该变量。

下面的函数和示例说明了如何查找字符串中字符的所有匹配索引，然后重新分配给字符串变量。

---

匹配指数：

  this.reveal = function(str, char, indices = []) {
    str.replace(/./g, (match, index) => match == char && indices.push(index));
    this.replaceIndexes(indices, char)
  };

替换字符串：

  this.replaceIndexes = function(indices, char) {
    this.current = this.current.replace(/./g, (match, index) => {
      if (indices.includes(index)) return char;
      return match;
    });
  }

---

示例：

---

//visual aid:
const print = textContent => 
document.body.appendChild(Object.assign(document.createElement("p"), {textContent} ));

//code:
function Game(word) {
  this.init = word;
  this.current = word.replace(/./g, "_");
  
  this.reveal = function(str, char, indices = []) {
    str.replace(/./g, (match, index) => match == char && indices.push(index));
    this.replaceIndexes(indices, char)
  };

  this.replaceIndexes = function(indices, char) {
    this.current = this.current.replace(/./g, (match, index) => {
      if (indices.includes(index)) return char;
      return match;
    });
    print(this.current);
  }
  this.guess = function(char) {
       print(`guessing ${char}...`);

   if(this.init.includes(char) && !this.current.includes(char)) {
     this.reveal(this.init, char);
   }
   else {
     print("bad guess!");
     print(this.current);
   }
  }
  print("Game Started");
  print(this.current);
}


let myGame = new Game("hello");

myGame.guess("l");
myGame.guess("h");
myGame.guess("n");