我想將城市名稱作為輸入，然后單擊按鈕，它應該呼叫特定的 url https://www.google.com/maps/search/tourist places in mumbai，并以反應中的輸入值結束 url。它應該在新標簽頁中打開網址
Destination.jsx（檔案名）
import React from 'react'
const Destination = () => {
return (
<div>
<h1>Destination</h1>
<input type="text" name="place" class="form-control" id="place" placeholder="Enter place" />
<button type="Submit" id="submit"> Search </button>
</div>
)
}
export default Destination
uj5u.com熱心網友回復：
創建一個狀態：
const [destination, setDestination] = useState("");
然后使用此狀態填充您的搜索查詢，如下所示：
<input type="text" name="place" class="form-control" id="place" placeholder="Enter place" value={destination} onChange={(e) => setDesitnation(e.target.value)} />
然后當您提交時，您可以在onClick()of 按鈕上呼叫自定義函式：
<button id="submit" onClick={searchDestination}> Search </button>
該功能可能會像這樣：
const searchDestination = () => {
window.location.href = `https://www.google.com/maps/search/tourist places in ${destination}`;
}
uj5u.com熱心網友回復：
您可以這樣做以在新標簽中搜索地點。
import React from 'react';
const Destination = () => {
const handleSearch = (e) => {
window.open(
`https://www.google.com/maps/search/tourist places in ${e.target.place.value}`,
'_blank'
);
};
return (
<div>
<h1>Destination</h1>
<form onSubmit={handleSearch}>
<input
type="text"
name="place"
class="form-control"
id="place"
placeholder="Enter place"
/>
<button type="Submit" id="submit">
Search
</button>
</form>
</div>
);
};
export default Destination;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529675.html
上一篇：Intellij create-react-app：axios未定義
下一篇：對特定片段使用不同的應用欄