我有一個帶有單個輸入的表單，它是搜索 url 的查詢 -
<form className={styles.searchInputContainer} role="search" action="/search">
<label htmlFor={id} className={styles.searchLabel}>{constants.search}</label>
<input id={id} className={styles.searchInput} type="search" name="q" placeholder="Search..." autocomplete="off" />
</form>
目前，當我按下回車鍵時，url 將以 '/search?q= whatever_the_input_is '結尾
我目前正在檔案的其他地方進行邏輯檢查，以檢查搜索欄是否在特定頁面上。isShoppingPage有了這個布爾值（我嘗試將 'type=shop' 附加到輸入值，但隨后 url 最終具有 URL 編碼。我對如何有條件地添加它而不改變name="q"輸入當前具有和需要的內容感到困惑。
uj5u.com熱心網友回復：
而不是action你可以onSubmit使用form.
import React, {useState} from 'react';
const Form = (props) => {
const {styles, id, constants} = props;
const [qValue, setQValue] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
// here you can make API call with q=qValue and type=shop
};
return (
<form className={styles.searchInputContainer} role="search" onSubmit={handleSubmit}>
<label htmlFor={id} className={styles.searchLabel}>{constants.search}</label>
<input id={id} className={styles.searchInput} type="search" name="q" placeholder="Search..." autocomplete="off" value={qValue} onChange={e => setQValue(e.target.value)} />
</form>
)
};
這是來自反應檔案的指南
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/442987.html
標籤：javascript 反应 网址 反应钩子
上一篇：將分頁器指示器影片化為按鈕
下一篇：如何使用重復查詢鍵構造URL？