单击事件不正确地更改相同类型的所有React组件

Question

我为多次渲染的组件设置了onClick事件。触发此onClick时，将更改由JS变量确定的按钮内的文本。但是，当我单击一个组件的按钮时，文本将更改为同一类型的所有其他组件。这是代码：

FormEntity.js：

import React from 'react';

let hasFile = false;
let uploadBtnText = 'Simulate file upload';
const FormEntity = (props) => {
  const handleClick = () => {
      if(hasFile) {
        props.formInstanceRemoved(props.instanceId);
        hasFile = false;
        uploadBtnText = 'Simulate file upload';
      } else {
        props.formInstanceUploaded(props.instanceId, props.blueprintId);
        hasFile = true;
        uploadBtnText = 'Remove file';
      }
  };

  return (
    <div>
      <button type="button" onClick={handleClick}> {uploadBtnText} </button>
    </div>
  );
};

export default FormEntity;

这张图片应该有助于进一步说明问题。

单击按钮应仅影响文本和该按钮内的任何其他内容，而不是所有其他组件。有什么建议吗？

Answer 1

您可能每Null个FormEntity。因此，导入的组件import / require的所有实例共享相同的FormEntity变量。 只要在特定uploadBtnText的实例中更改它，因为它是共享的，FormEntity的所有其他实例也会更新。

我建议将无状态功能FormEntity重构为标准组件，并在其状态中编写FormEntity。

Answer 2

您希望每个按钮都有自己的状态，因此您应该将按钮定义为有状态按钮并使用<?php if(isset($_POST['pin'])) { // include Database connection file include("db_connection.php"); $pin = mysqli_real_escape_string($con, $_POST['pin']); $query = "SELECT pin,product FROM auth WHERE pin = '$pin'"; if(!$result = mysqli_query($con, $query)) { exit(mysqli_error($con)); } if(mysqli_fetch_array($result) > 0) { // authentic code entered echo '<div style="color: green;"> <b>'.$pin.'</b> This is a genuine product </div>'; } else { // not valid code entered echo '<div style="color: red;"> <b>'.$pin.'</b> Your product is not authentic! </div>'; } } ?> 。您当前的实现更改了模块级变量，这些变量由按钮的所有实例共享。

setState