Question

我创建的组件可以MessageCreator，这是该组件在浏览器中的外观快照

现在，当用户在此文本区域中写入消息，然后单击此按钮时，消息将发送到服务器

在发送邮件时，我禁用了 textarea 和按钮
然后，当服务器成功返回响应时：
1. 我将 textarea 的值设为空
2. 我启用了文本区域和按钮
3. 我显示警告消息：“消息发送成功”
但是当服务器返回失败响应
1. 我启用了文本区域和按钮
2. 我显示警告消息说“无法发送消息”

MessageCreator.js文件的代码

import React from "react";
import PropTypes from "prop-types";

const MessageCreator = props => {
  const [message, setMessage] = React.useState("");
  const [alertMessage, setAlertMessage] = React.useState(undefined);
  const [disabled, setDisabled] = React.useState(false);

  const submitHandler = e => {
    e.preventDefault();

    if (typeof props.onClickSend === "function") {
      setDisabled(true);
      props.onClickSend(message)
        .then(response => {
          setMessage("");
          setDisabled(false);
          setAlertMessage(response);
        })
        .catch(error => {
          setDisabled(false);
          setAlertMessage(error);
        });
    }
  };

  return (
    <React.Fragment>
      {alertMessage && <div>{alertMessage}</div>}
      <form onSubmit={e => submitHandler(e)}>
        <textarea
          value={message}
          onChange={e => setMessage(e.target.value)}
          disabled={disabled}
        />
        <br />
        <button disabled={disabled}>Send Message</button>
      </form>
    </React.Fragment>
  );
};

MessageCreator.propTypes = {
  onClickSend: PropTypes.func
};

export default MessageCreator;

App.js文件的

代码（在该文件中，我使用了MessageCreator组件）

import React from "react";
import ReactDOM from "react-dom";

import MessageCreator from "./MessageCreator";

function App() {
  const sendMessage = message => {
    // Code to send message to server
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve("Message send successfully");
        reject("Error can not send message");
      }, 2000);
    });
  };

  return (
    <div className="App">
      <MessageCreator onClickSend={sendMessage} />
    </div>
  );
}

Code in Sandbox

我的问题是该技术（我在MessageCreator.js中使用它）是否可以处理success response和failed response。我的意思是这段代码：

props.onClickSend(message).then(response => {
  setMessage("");
  setDisabled(false);
  setAlertMessage(response);
}).catch(error => {
  setDisabled(false);
  setAlertMessage(error);
});

注意：：这是一个简单的组件（我的意思是MessageCreator组件），但是我还有另一个大组件使用相同的技术。

因此，简而言之，我的问题是：是否可以将函数（which return promise）作为prop传递给另一个组件。（例如我将其作为道具传递给MessageCreator组件的函数）

是否可以将函数“ return promise”作为道具传递给另一个组件

0 个答案: