form

在 TextField 和 Toggle 之後，另一個常見的表單控件是 Picker。它允許我們在一系列可選項中進行選擇。 首先，我們需要有一個包含選項列表的數組： var cities = ["Rome", "Milan", "Venice", "Florence"] 然後，我們需要一個屬性來存儲所選擇的選項。我們使用 @State 對其進行封裝，因為它是基於用戶輸入而變化的內容： @State private var selected = "Rome" 最後，我們使用 Picker 視圖。我們傳遞 2 個參數。第一個是標籤，第二個是用於所選項的屬性，在閉包中，我們使用 ForEach 視圖 為每個不同的選項添加一個文本視圖： Picker("What's your favorite city?", selection: $selected) { ForEach(cities, id: \.self) { Text($0) } } 這是我們的 ContentView 的完整代碼： struct ContentView: View { var cities = ["Rome", "Milan", "Venice", "Florence"] @State private var selected = "Rome" var body: some View { Form { Picker("What's your favorite city?...

這是一個非常簡單的例子，展示了一個表單接受GitHub用戶名稱，一旦接收到submit事件，它將向 GitHub API 請求該用戶的信息並打印。 這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時，這個名稱被綁定到它的狀態中。 當按下Add card時，清除Form組件的userName狀態，以清除輸入表單。 除了 React，該示例還使用了Axios庫。這是一個很好的輕量級庫，用於處理網絡請求。可在 CodePen 中的設置中添加它，或者使用npm install axios在本地安裝它。 輸出: 代碼: 首先創建 Card 組件，這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據，使用： props.avatar_url 用戶頭像 props.name 用戶名稱 props.blog 用戶個人網站的URL const Card = props => { return ( <div style={{ margin: '1em' }}> <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} /> <div> <div style={{ fontWeight: 'bold' }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) } 我們創建了一個 Card 組件的列表，它將作為父組件中的 cards 屬性傳遞給 CardList ，使用 map() 函數遍歷它並輸出一個卡片列表： const CardList = props => ( <div> {props....

ReCaptcha 是 Google 對表單垃圾郵件和濫用的解決方案。 這是一個非常有價值的工具。如果您還沒有在 https://www.google.com/recaptcha 創建帳戶，請先創建並添加您的網站域名。 選擇 v2，並選擇「我不是機器人」複選框： 你會獲得一個站點金鑰和站點密鑰。 將密鑰儲存在您的.env文件中： RECAPTCHA_SECRET=<....> 現在，在您的 Next.js 網站中使用 npm 安裝react-google-recaptcha： npm install react-google-recaptcha 現在，在具有表單的頁面中引入它： import ReCAPTCHA from 'react-google-recaptcha' 並將其添加到 JSX 中： <ReCAPTCHA size="normal" sitekey="<YOUR SITE KEY>" /> 您應該在表單中看到它： 現在，如果您嘗試提交表單，它能正常工作，因為它什麼都不做。任何人，包括機器人，在不點擊「我不是機器人」按鈕的情況下都可以成功提交表單。 您需要在服務器端驗證驗證碼，以使其有用。 假設您將表單發送到 Next.js API 路由。在其中，添加一個validateCaptcha方法： const validateCaptcha = (response_key) => { return new Promise((resolve, reject) => { const secret_key = process.env.RECAPTCHA_SECRET const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secret_key}&response=${response_key}` fetch(url, { method: 'post' }) .then((response) => response.json()) .then((google_response) => { if (google_response....

在進行一個項目時，我遇到了一個問題，這個項目是使用 React 構建的表單，並且與瀏覽器的自動填充功能有關。 你知道嗎，當瀏覽器自動填寫你的用戶名/密碼，因為你之前已經輸入過？ 那就是自動填充，這也是我遇到問題的原因。特別是在 Chrome 和 Firefox 上複製這個問題，但任何瀏覽器都可能碰到這個問題。 這個表單是使用 useState 鉤子構建的一個普通而簡單的表單。 這是表單中的一個示例「email」字段： import { useState } from 'react' //... const [email, setEmail] = useState('') <input id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event.target.value)} /> 當你在這個字段中輸入電子郵件時，email 的值會使用 setEmail 進行更新，這樣我就可以在表單提交事件中使用它，然後將它發送到服務器。 在某個時刻，我意識到瀏覽器正在自動填寫電子郵件地址和密碼，但是 React 卻沒有識別到它！ 可能是因為它在 React 完全運行之前就填寫了該字段，所以無法截取該事件。 我進行了一些研究，不同瀏覽器的不一致性和自動填充工作方式的差異讓我感到困惑，因此我不得不創建一個簡單的解決方案。 我使用了 useRef 和 useEffect 來實現它： import { useState, useEffect, useRef } from 'react' 我創建了一個 ref： const emailField = useRef(null) 並將它附加到 JSX 的輸入字段上： <input ref={emailField} id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event....