0

基本上，我被要求集成一个 Recaptcha 作为我在 React Js 上使用 Polaris 制作的表单的一种验证形式，但是，我不知道该怎么做。

Polaris 似乎与其他 API 的交互不太好，或者我做错了什么，我不知道，我需要帮助。

这是代码，也许我们可以一起获得一些见解。

import React, { useCallback, useState } from 'react';
import {  Form, FormLayout, TextField } from '@shopify/polaris';

function NewForm() {
  const [email, setEmail] = useState('');
  const [fullName, setFullName] = useState('')
  const [address, setAddress] = useState('')
  const [phone, setPhone] = useState('')

  const handleSubmit = useCallback((_event) => {
    setEmail('');
    setFullName('');
    setAddress('');
    setPhone('');
    console.log("Submitted")
  }, []);



  const handleEmailChange = useCallback((value) => setEmail(value), []);
  const handleFullNameChange = useCallback((value) => setFullName(value), [])
  const handleAddressChange = useCallback((value) => setAddress(value), [])
  const handlePhoneChange = useCallback((value) => setPhone(value), [])


  return (
    <Form onSubmit={handleSubmit}>

      <FormLayout>

        <TextField
          value={fullName}
          onChange={handleFullNameChange}
          label="Full Name"
          autoComplete='name'


        />
         <TextField
          value={phone}
          onChange={handlePhoneChange}
          label="Phone Number"
          type="tel"
          autoComplete="phone"

        /> 
        
        <TextField
          value={address}
          onChange={handleAddressChange}
          label="Address"
          type="text"
          autoComplete="address"

        />
        <TextField
          value={email}
          onChange={handleEmailChange}
          label="Email"
          type="email"
          autoComplete="email"

        />

       
      </FormLayout>

    </Form>
  );
}

export default NewForm;

Polaris 没有完全优化，还是只有我一个人？

4

0 回答 0