React 将查询字符串放入表单的 value 属性中答案

【问题标题】：React put query string into form's value attributeReact 将查询字符串放入表单的 value 属性中
【发布时间】：2022-01-12 07:58:53
【问题描述】：

我有一个搜索页面，something/search?q=foo，每当我在这个页面上我想把foo 放在我表单的值标签中。（不用于搜索目的，我有一个功能齐全的搜索栏，我只是想向客户展示他搜索的最后一件事）。

我得到了搜索词：(window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : ''，这很有效，尽管当将其放入表单值标签时，立即反应块，它不允许我在输入字段中写入任何内容。我认为这是因为它更新到这个字符串的速度非常快，而你看不到它发生。

我将如何实现这一点，一次更新表单的值，仅此而已？

这是我的简化代码：



<input type="search" name="q" id="q" value={(window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : ''} <--- This is where I want to put the search string

到目前为止我尝试过的是：


this.state = {
   value:''
}

...

handleTitle = (s) => {
   this.setState({value:s})
}

...

<input ... value={this.state.value} onChange={this.HandleTitle((window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : '')}

这会导致无限状态更新

【问题讨论】：

您是否在您的应用程序中使用过任何类型的路由器？路由器可以轻松提供该查询。
获取搜索词不是问题，问题是如何将其放入值字段
请更新您的问题。向我们展示代码你是怎么做的？我会说为值字段设置一个状态。使用 useEffect 并设置查询词。并将该输入作为输入字段的值。
我试过这个，但它给了我无限的状态更新和应用程序崩溃

标签： javascript reactjs forms virtual-dom

【解决方案1】：

如果您分享代码或要点，提供更具体的答案会更容易

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

我建议您在组件挂载时获取 search-param 的值，并将其存储在组件的本地状态中。然后从状态读取/更新值。比如：

const [search, setSearch] = useState("");

useEffect(() => {
    setSearch(new URLSearchParams(new URL(window.location.href).search).get('q'));
}, []);

return (
     <intput type="text" value={search} onChange={e => setSearch(e.target.value)} />
);

我没有测试过，但你明白了它的要点。

【讨论】：

谢谢你，虽然目前这个项目没有使用钩子，但这也很有帮助。
我是在您更新帖子之前写的，所以在写答案时我没有任何上下文。很高兴它有帮助！

【解决方案3】：

无论如何，如果您想本机访问q。 工作示例 https://8zwht.csb.app/?q=test

import React from "react";
import "./styles.css";

class App extends React.Component {
  state = {
    value: ""
  };

  componentDidMount() {
    const search = new URL(window.location).searchParams;
    const term = search.get("q");
    if (term)
      this.setState({
        value: term
      });
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <input
        type="text"
        onChange={this.handleChange}
        value={this.state.value}
      />
    );
  }
}
export default App;

【讨论】：

是的，ComponentDidMount 是我所缺少的，谢谢！