在Reactjs中添加输入框的文本，打开下一页的url

Question

我的方法：

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}
      />

我能够将 ref 从 textinput 传递到我的 launchSearch 方法，并且能够通过连接 [=] 中的 searchRef 在新选项卡中打开 URL 28=]。如果不使用 ref，还有其他方法可以做到这一点吗？在 textInput 中使用 State 和 "value"。我正在尝试通过传递 value = {this.state.search} 和 launchSearch:

来使用状态

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

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

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

在Reactjs中添加输入框的文本，打开下一页的url

Open the url in the next page by adding the text of input field in Reactjs

javascript

input

typescript

reactjs

react-state