javascript - ReactJs自定义提交按钮组件不起作用

Question

我正在尝试创建一个自定义提交按钮组件，该组件将自行处理按钮禁用-启用。到目前为止，我得到了这个：

按钮组件：

import * as React from 'react';
import Promise = require('promise');

let isDisabled = false;

const buttonClickHandler = onClick => {
  return new Promise((resolve, reject) => {
    console.log('inside promise');
    isDisabled = true;
    onClick();
    return resolve(true);
  });
};

export const SubmitButton = ({
  type,
  className,
  onClick,
  buttonStyle = {},
  children
}) => {
  return (
    <button
      type={type || 'submit'}
      className={className}
      onClick={() =>
        buttonClickHandler(onClick).then(() => {
          console.log('after promise');
          isDisabled = false;
        })
      }
      style={buttonStyle}
      disabled={isDisabled}
    >
      {children}
    </button>
  );
};

export default SubmitButton;

我这样称呼它：

<SubmitButton type="button" className="btn btn-primary" onClick={this.submitForm}>
Submit
</SubmitButton>

表单提交函数为：

public submitForm = () => {
  setTimeout(() => {
    console.log('waiting done');
  }, 5000);
};

所以预期的输出是

inside promise
----等待 5000 毫秒----
waiting done
after promise

但我看到
inside promise
after promise
----等待 5000 毫秒----
waiting done

那么我做错了什么？该按钮也没有被禁用。

标签： javascriptreactjstypescriptes6-promise

Answer 1

需要做的一些更正：

• isDisabled 需要是状态而不是全局变量
• 在组件中移动buttonClickHandler功能SubmitButton
• onClick()组件内部需要SubmmitButton返回一个promise

您的代码的工作副本在这里

export const SubmitButton = ({
  type,
  className,
  onClick,
  buttonStyle = {},
  children
}) => {
  const [isDisabled, setIsDisabled] = useState(false);
  const buttonClickHandler = onClick => {
    // return new Promise((resolve, reject) => {
    console.log("inside promise");
    setIsDisabled(true);
    return onClick();
    // });
  };
  return (
    <button
      type={type || "submit"}
      className={className}
      onClick={() =>
        buttonClickHandler(onClick).then(() => {
          console.log("after promise");
          setIsDisabled(false);
        })
      }
      style={buttonStyle}
      disabled={isDisabled}
    >
      {children}
    </button>
  );
};

export default SubmitButton;

用法

const submitForm = () => {
    return new Promise((res, rej) => {
      setTimeout(() => {
        console.log("waiting done");
        res(true);
      }, 5000);
    });
  };