时间戳

首页 > 解决方案 > 如何启用提交按钮当我在表单的所有输入标签中输入数据时

reactjs - 如何启用提交按钮当我在表单的所有输入标签中输入数据时

问题描述

我正在使用 React 项目，使用 Ant 设计框架。在我的项目中，我有四个输入标签的表单，在这里我禁用了提交按钮。现在当我在所有输入标签中输入信息时如何启用提交按钮。现在你能告诉我当我在所有输入标签中输入所有信息时如何启用提交按钮。

这是我的代码 App.js


import React, { useState } from "react";
import { Row, Col, Button, Card, Form, Input, Select } from "antd";

const Guestdetails = () => {
    const [data, setData] = useState(null)

    const handleChange = ({ target }) => {
        const { name, value } = target
        const newData = Object.assign({}, data, { [name]: value })
        setData(newData)
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
    }


    const prefixSelector = (
        <Form.Item name="prefix" noStyle>
          <Select
            style={{
              width: 30,
              height: 10,
            }}
          >
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
          </Select>
        </Form.Item>
      );
    return (
        <div>
            <div className="customizedCards">
          <Card className="cardStyle">
            <div className="main-form">
              <h5 className="idDetails">GUEST DETAILS</h5>
              <Form style={{marginLeft: "-10px"}}>
              <Form.Item
            name="name"
            noStyle
            rules={[{ required: true, message: 'firstname is required' }]}
          >
            <Input type="text" name='firstname' onChange={handleChange} style={{ width: 400 }} placeholder="Firstname" />
          </Form.Item>
          <Form.Item
            name="name"
            noStyle
            rules={[{ required: true, message: 'lastname is required' }]}
          >
            <Input type="text" name='lastname' onChange={handleChange} style={{ width: 400 }} placeholder="Lastname" />
          </Form.Item>
          <Form.Item
            name="name"
            noStyle
            rules={[{ required: true, message: 'email is required' }]}
          >
            <Input type="email" name='email' onChange={handleChange} style={{ width: 400 }} placeholder="Email" />
          </Form.Item>
          <Form.Item
        name="phone"
        rules={[
          {
            required: true,
            message: 'Please input your phone number!',
          },
        ]}
      >
        <Input type="number" name='phonenumber' onChange={handleChange} addonBefore={prefixSelector} style={{ width: 400 }} placeholder="Phone Number"  />
      </Form.Item>
      <Button className="submit" onClick={handleSubmit} disabled type="primary">Submit</Button>
              </Form>
            </div>
          </Card>
        </div>
        </div>
    )
}

export default Guestdetails

标签： reactjs

解决方案

您可以创建一个 useEffect 来监视数据更改，然后检查是否所有字段都已填写。

const [isValid, setIsValid] = useState(false);

 useEffect(() => {
    if (data !== null) {
      setIsValid(Object.values(data).every((value) => value !== ""));
    }
  }, [data]);

之后，您可以将其添加到您的按钮中。

<Button
  className="submit"
  onClick={handleSubmit}
  disabled={!isValid} // Add this
  type="primary"
>
  Submit
</Button>

这是一个有效的代码笔：https://codesandbox.io/s/react-fiddle-forked-cpkn6?file=/src/Components/guest.js: 3018-3229

编辑：使用具有空值而不是 null 的属性更新数据的初始对象。

const [data, setData] = useState({
    firstname: "",
    lastname: "",
    email: ""
  });

推荐阅读