时间戳

首页 > 解决方案 > 如何有条件地激活提交按钮？

javascript - 如何有条件地激活提交按钮？

问题描述

我制作了一个网络应用程序，您可以在其中通过图像 url 上传图像。链接在这里：https://meme-gallery-web-app.netlify.app/

问题是如果我在表单为空的地方按下提交按钮，它仍然会向数据库发布一个空的图像数据。

我的问题是只有当你有正确的图像时，我才能激活按钮？只有在表单中提交了正确的图像 url 时，按钮才会激活并且我可以提交它。这是我处理表单请求的代码。

import { FormControl, Input, Button } from "@chakra-ui/react";
import axios from "axios";
import React from "react";
import { baseUrl } from "../config";

class SubmitLink extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: "",
    };
  }

  onInputChange = (event) => {
    this.setState({
      url: event.target.value,
    });
  };
// where I make post request. 
  onClick = () => {
    axios
      .post(`${baseUrl}/submitlink`, {
        url: this.state.url,
      })
      .then((response) => {
        console.log(response);
        this.props.onSuccessfulUpload();
        this.setState({
          url: "",
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  render() {
    return (
      <FormControl>
        <Input
          type='url'
          value={this.state.url}
          onChange={this.onInputChange}
          width={{
            base: "70%",
            md: "55%",
            xl: "60%",
          }}
          ml={{
            base: "5%",
            md: "5%",
            xl: "4%",
          }}
        />
        <Button
          ml={2}
          mb={1}
          colorScheme='teal'
          type='submit'
          onClick={this.onClick}
          size='md'
        >
          Submit
        </Button>
      </FormControl>
    );
  }
}

export default SubmitLink;

这是我处理发布请求的 API

// post api for saving images from URL

const imageModel = require("../models/models.js");

//ignore the date variables. haven't properly implemented it. 
var date = new Date();
var currentDate = date.toLocaleDateString();

const submitLink = async (req, res) => {
  let saveImageFromUrl = new imageModel();
  saveImageFromUrl.img.data = req.body.url;
  saveImageFromUrl.postedAt = currentDate;
  await saveImageFromUrl.save(function (err, result) {
    if (err) return console.error(err);
    else {
      res.sendStatus(202);
    }
  });
};

module.exports = submitLink;

标签： javascriptreactjsexpress

解决方案

您可以在检查 url 是否有效时禁用该按钮

像这样的东西：

const isUrlValid = () => {
  const { url } = this.state;
  const res = url.match(
    /(http(s)?:\/\/.)?(www\.)?[\w#%+.:=@~-]{2,256}\.[a-z]{2,6}\b([\w#%&+./:=?@~-]*)/g
  );
  if (res == null) return false;
  return true;
};

//...JSX Body

<Button
  ml={2}
  mb={1}
  colorScheme="teal"
  type="submit"
  onClick={this.onClick}
  size="md"
  disabled={isUrlValid()}
>
  Submit
</Button>;

推荐阅读