Javascript 单击“事件”以错误地更改相同类型的所有React组件

我为多次渲染的组件设置了一个

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;

从“React”导入React；
设hasFile=false；
让uploadBtnText='Simulate file upload'；
const FormEntity=（道具）=>{
常量handleClick=（）=>{
如果（hasFile）{
移除道具forminstanced（道具instanceId）；
hasFile=false；
uploadBtnText='模拟文件上传'；
}否则{
props.forminstanceUpload（props.instanceId、props.blueprintId）；
hasFile=true；
uploadBtnText='删除文件'；
}
};
返回(
{uploadBtnText}
);
};
导出默认表单实体；

下面的图片应该有助于进一步说明问题

---

单击按钮只会影响文本和该按钮中的其他内容，而不会影响所有其他组件。有什么建议吗？

您可能会将您的

表单实体

包含在

导入/要求

中。因此，导入组件的所有实例

FormEntity

共享相同的

uploadBtnText

变量。 每当它在特定

FormEntity

的实例中被更改时，因为它是共享的，

FormEntity

的所有其他实例也会被更新

---

我建议将无状态函数

FormEntity

重构为标准组件，并在其状态下编写

uploadBtnText

您希望每个按钮都有自己的状态，因此应将按钮定义为有状态按钮，并使用

setState

。您当前的实现更改了模块级变量，这些变量由按钮的所有实例共享

const FormEntity extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasFile: false,
      uploadBtnText: 'Simulate file upload',
    };
  }

  handleClick = () => {
    if (this.state.hasFile) {
      this.props.formInstanceRemoved(props.instanceId);
      this.setState({
        hasFile: false,
        uploadBtnText: 'Simulate file upload',
      });
    } else {
      this.props.formInstanceUploaded(props.instanceId, props.blueprintId);
      this.setState({
        hasFile: true,
        uploadBtnText: 'Remove file',
      });
    }
  };

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

const FormEntity扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
hasFile:false，
uploadBtnText:“模拟文件上载”，
};
}
handleClick=（）=>{
if（this.state.hasFile）{
此.props.formInstanceRemoved（props.instanceId）；
这是我的国家({
hasFile:false，
uploadBtnText:“模拟文件上载”，
});
}否则{
this.props.forminstanceUpload（props.instanceId、props.blueprintId）；
这是我的国家({
hasFile：是的，
uploadBtnText:“删除文件”，
});
}
};
render（）{
返回(
{uploadBtnText}
);
}
};