使用 React.js 在 HTML 按钮中绑定函数并启用/禁用状态

介绍

React.js 的状态管理方法允许系统地实现各种各样的用户体验。一种这样的用户体验技术是告诉用户单击按钮时正在发生某事或在后台加载。为了实现这一点，我们希望有一个布尔状态值来控制用户界面组件的可见性。也就是说，如果状态值为true，则禁用组件。否则，禁用组件。该值还可用于确定应用程序的某个部分是否将显示加载消息或任何可视组件。

定义状态值

假设您正在创建一个包含两个主要输入元素的SearchComponent ：

用户可以在文本输入框中输入搜索查询
提交按钮，用于号召用户开始搜索

然后您将使用isDisabled布尔状态控制这两个元素的禁用属性。

建立国家

在组件的构造函数中，继续定义isDisabled状态，初始值为false。这告诉用户可以自由地在文本输入中输入内容并单击提交按钮。

      import React from 'react';

export default class SearchComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDisabled: false
    }
  }
}
    

将状态绑定到 UI

创建组件的render()方法，该方法返回包含两个 UI 元素的表单本身。复制以下函数并将其粘贴到 SearchComponent 中。实际上，它通常位于 React.js 组件的最后一个方法中。

      render() {
  return (
    <div>
      <input type="text" disabled={this.state.isDisabled} />
      <button disabled={this.state.isDisabled}>
        Submit Query
      </button>
    </div>
  );
}
    

通过 JSX 将this.state.isDisabled的值嵌入为disabled属性的值，并用{}包裹。由于其初始值为false，因此用户可以继续在其中输入文本。

      <input type="text" disabled={this.state.isDisabled} />
    

提交查询的按钮也是如此。

      <button disabled={this.state.isDisabled}>
  Submit Query
</button>
    

禁用接口

接下来要做的是通过调用this.setState()绑定一个函数，该函数将更新组件的状态值，其中this是对 React.js 组件实例的引用。请记住，在 React.js 中，对this.setState()的调用将强制使用新更新的值重新渲染组件。该函数将如下所示：

      handleSubmitClicked() {
  this.setState({
    isDisabled: true
  });
}
    

绑定到事件

给定您的事件处理程序，您将函数绑定到按钮的onClick属性：

      <button 
  disabled={this.state.isDisabled}
  onClick={this.handleSubmitClicked.bind(this)}
>
  Submit Query
</button>
    

调用.bind(this)函数以保留this的值，该值是组件实例的引用。这样（不是双关语），handleSubmitClicked()逻辑中的this将始终保留组件实例的值，从而允许从中调用setState() 。

级联效应

由于handlSubmitClicked()将isDisabled的状态更新为true，它将强制调用组件的render()方法，导致输入元素的disabled属性的值为true。因此，这将创建一个效果，告诉用户单击按钮后发生了一些事情。

重新启用接口

该过程完成后，您可以告诉用户可以自由输入或修改当前文本字段。通过创建另一个执行相反操作的事件处理程序函数来实现这一点 - 即启用 UI 组件：

      enableComponents() {
  this.setState({
    isDisabled: false
  });
}
    

模拟过程

为了模拟“某事正在发生”，请在handleSubmitClicked()中添加代码，等待三秒钟，然后触发一个函数，该函数反过来将调用enableComponents()。

      handleSubmitClicked() {
  this.setState({
    isDisabled: true
  });

  setTimeout(
    function() {
      this.enableComponents()
    }.bind(this),
    3000
  );
}
    

请注意，您将再次针对setTimeout()的第一个参数函数调用.bind(this)。这将允许this将其值保留为对此组件实例的引用，从而允许调用enableComponents()。通常，此超时代码将被实际处理用户输入所取代，一旦完成，最终将调用enableComponents() 。

总体代码

您的最终组件形式将如下所示：

      import React from 'react';

export default class SearchComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDisabled: false
    }
  }

  handleSubmitClicked() {
    this.setState({
      isDisabled: true
    });

    setTimeout(
      function() {
        this.enableComponents()
      }.bind(this),
      3000
    );
  }

  enableComponents() {
    this.setState({
      isDisabled: false
    });
  }

  render() {
    return (
      <div>
        <input type="text" disabled={this.state.isDisabled} />
        <button 
          disabled={this.state.isDisabled}
          onClick={this.handleSubmitClicked.bind(this)}
        >
          Submit Query
        </button>
      </div>
    );
  }
}
    

试用该组件，并注意单击“提交查询”后，输入和按钮元素都将被禁用，三秒后将再次启用。

结论

本指南演示了一种简单的方法，通过维护一个布尔状态变量作为 UI 可见性的值，向用户传达单击按钮后正在发生某事。尝试看看您是否可以通过让单个状态变量控制界面的可访问性，将此技术合并到您自己的有状态 React 组件中。以下是一些建议：

如果值为true，则使用状态变量显示加载文本或可视化效果。否则，隐藏文本或可视化效果。
在handleSubmitClicked()中成功执行 AJAX 调用后调用enableComponents()

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文