如何有条件地将url参数附加到表单文本输入中

Question

我有一个带有单个输入的表单，它是对搜索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(，当用户点击回车键时，我想有选择地在url中附加一个"type=shop"，这样它就会自动只搜索商店类别。我曾尝试将"type=shop"附加到输入值，但url最终有url编码。我很困惑如何在不更改输入当前拥有和需要的name="q"的情况下有条件地添加它。

Answer 1

您可以使用form的onSubmit道具来代替action。

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>
)
};

这是来自react docs 的指南