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

【问题标题】：Click event improperly changing all React components of the same type单击事件不正确地更改所有相同类型的 React 组件
【发布时间】：2016-09-08 20:59:54
【问题描述】：

我为一个多次呈现的组件设置了一个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;

这是一张有助于进一步说明问题的图片。

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

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

您可能在import / require 中包含您的FormEntity。因此导入组件FormEntity 的所有实例共享相同的uploadBtnText 变量。每当它在特定 FormEntity 的实例中发生更改时，因为它是共享的，所以 FormEntity 的所有其他实例也会更新。

我建议将您的无状态功能 FormEntity 重构为标准组件并在其状态下编写 uploadBtnText。

【讨论】：

【解决方案2】：

您希望每个按钮都有自己的状态，因此您应该将按钮定义为有状态按钮并使用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>
    );
  }
};

【讨论】：