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);
};

所以预期的输出是

内部 promise
----等待 5000 毫秒----
等待完成
promise 之后

但我看到
内部 promise
promise 之后
----等待 5000 毫秒----
等待完成

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

Answer 1

需要进行一些更正:

• isDisabled 需要是一个状态而不是全局变量
• 将 buttonClickHandler 函数移至 SubmitButton 组件中
• SubmmitButton 组件内的 onClick() 需要返回一个 Promise

您的 code is here 的工作副本

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);
    });
  };