React 将查询字符串放入表单的值属性中

Question

我有一个搜索页面 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) : '')}

这会导致无限状态更新

Answer 1

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

Answer 2

我建议您在组件挂载时获取搜索参数的值，并将其存储在组件的本地状态中。然后 read/update 来自状态的值。类似于：

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

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

Answer 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;

React 将查询字符串放入表单的值属性中

React put query string into form's value attribute

javascript

forms

reactjs

virtual-dom