通过在 Reactjs 中添加输入字段的文本，在下一页中打开 URL

Question

My Method：

launchSearch() {
let searchString = this.searchRef.current?.value;
window.open(
"https://sample.com/list/market/" + searchString,
"api-explorer"
);
}

内部渲染方法：

<TextInput
placeholder="Placeholder text"
onKeyPress={(event) => {
if (event.key === "Enter") {
this.launchSearch();
}
}}
ref = {this.searchRef}
/>

我能够将引用从文本输入传递到我的启动搜索方法，并且能够通过连接 URL 中的搜索参考在新选项卡中打开 URL。有没有其他方法可以做到这一点，而不使用 ref？在 textInput 中使用 State 和 "value"。我正在尝试通过传递值 = {this.state.search}并在 launchSearch 中使用状态：

launchSearch() {
window.open(
"https://sample.com/list/market/" + this.state.search,
"api-explorer"
);
}

它正在打开新窗口，但不接受我输入的搜索值。谁能帮我解决这个问题。

Answer 1

您可以使用onKeyDown

<TextInput
placeholder="Placeholder text"
onKeyDown={(event) => {
if (event.key === "Enter") {
this.launchSearch(event.target.value);
}
}}
/>
launchSearch(search) {
window.open("https://sample.com/list/market/"+search, "api-explorer");
}