小编Cas*_*dra的帖子

如何使用 Fetch 从响应标头获取内容类型

我正在尝试访问content-type从我的GET请求返回的内容,以便我可以决定我想要的预览类型(html可能通过 iframe 进行预览,对于 PDF 可能通过某些查看器进行预览)。问题是,当我执行console.log(response.headers)返回的对象时,其中没有内容类型,但是当我检查网络选项卡时,响应标头具有内容类型:html/text。如何从响应标头获取内容类型?这就是我的 GET 请求的样子

const getFile = async () => {
    var requestOptions = {
      method: "GET",
      headers: context.client_header,
      redirect: "follow",
    };
    let statusID = context.currentStatus.ApplicationID;
    var response = await fetch(
      process.env.REACT_APP_API_ENDPOINT +
        "/services/getStatus?ApplicationID=" +
        statusID,
      requestOptions
    );

    console.log(response.headers);

    if (response.ok) {
      let fileHtml = await response.text();
      setfileURL(fileHtml);
    } else {
      alert.show("Someting went wrong");
    }
  };
Run Code Online (Sandbox Code Playgroud)

javascript get response-headers fetch-api

3
推荐指数
1
解决办法
7035
查看次数

使用 React Hooks 在模态外部单击时关闭模态

我正在尝试创建一个弹出订阅框,只要单击关闭按钮或单击弹出窗口之外的任何位置,该框就会关闭。我创建了一个模态组件和一个showModal用于切换该模态可见性的状态。我尝试添加setShowModal(false)到外部div元素,但这只会禁用整个模式。每当我们在模态之外单击时,可以做什么来关闭模态。这就是我的主页的样子

const [showModal, setShowModal] = useState(false);

return (
    <>
      <div
        className="homepage"
        style={{
          filter: showModal ? "blur(8px)" : "none",
          minHeight:"80vh",
        }}
      >
        <section
          className="homepage-hero"
          style={{ paddingBottom:"-2rem", minHeight:"100vh" }}
        >
          <div className="hero-body">
            <div className="container">
              <div className="columns">
                <div className="column ">
                  <h1>
                    <span className="heading">
                      Finance <br />
                      Scheme
                    </span>
                    <br />
                  </h1>
                  <p>
                   Lorem Ipsum
                  </p>
                  <div className="is-hidden-tablet">

                  </div>
                  <div className="button-group">
                    <button
                      style={{
                        fontWeight: "600",
                        padding: "0.75em 1.9em",
                        borderRadius: "0px",
                        color: "white",
                        backgroundColor: "#24ca7a",
                        border: "1px solid #24ca7a", …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

3
推荐指数
1
解决办法
2万
查看次数

当用户从 React 的下拉列表中选择一个选项时如何启用另一个输入字段

如果用户从下拉列表中选择其他选项,我正在尝试启用另一个输入字段,并且我尝试向输入字段添加一个状态,该状态根据从下拉列表中选择的值设置为真/假,但我不是当我选择其他时能够查看输入选项。

const [designation, setDesignation] = useState("");
const [showOption, setShowOption] = useState(false);

<div className="field">
  <label className="label">Designation</label>
  <div className="control ">
    <select
      className="input"
      id="designation"
      name="Your Designation"
      value={designation}
      type="text"
      onChange={(e) => {
        setDesignation(e.target.value);
        if (value == "3") setShowOption(true);
        else setShowOption(false);
      }}
      placeholder="Your Designation"
      required
    >
      <option value="1">Product Manager</option>
      <option value="2">Developer</option>
      <option value="3">Other</option>
    </select>
  </div>
</div>;
{
  showOption ? (
    <div className="field">
      <label className="label">Designation</label>
      <div className="control ">
        <input
          className="input"
          id="designation"
          value={designation}
          type="text"
          onChange={(e) => setDesignation(e.target.value)}
          placeholder="Your Designation"
          required
        />
      </div>
    </div>
  ) : (
    "" …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

1
推荐指数
1
解决办法
48
查看次数