React如何将URL查询字符串q参数一次性回填到表单input的value属性

问题根源 #

1. 你直接将获取URL参数的固定表达式绑定到input的value属性，相当于给受控组件写死了值，没有对应逻辑更新这个值，所以输入行为被React阻止
2. 之前的尝试出现无限更新，是因为你在onChange属性中直接执行了handleTitle方法，每次组件渲染都会触发setState，setState又会触发重渲染，形成死循环

正确实现（类组件） #

只需要在组件首次挂载完成的生命周期中一次性读取URL参数赋值给state，后续输入通过正常的onChange事件更新state即可：

class SearchPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  componentDidMount() {
    // 组件挂载时仅执行一次，读取q参数赋值给state
    const qStr = (window.location.href.indexOf("?q") != -1) ? window.location.href.substring(window.location.href.indexOf("?q") + 3) : '';
    this.setState({ value: qStr });
  }

  // 正常处理输入变更
  handleInputChange = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <input 
        type="search" 
        name="q" 
        id="q" 
        value={this.state.value} 
        onChange={this.handleInputChange}
      />
    )
  }
}

优化建议 #

你当前手动切割URL字符串的方式存在瑕疵，如果q参数后还有其他参数（如something/search?q=foo&sort=time），会把后续的参数也一并读取。更稳妥的参数读取方式如下：

const searchParams = new URLSearchParams(window.location.search);
const q = searchParams.get('q') || '';

函数组件实现参考 #

如果你用的是函数组件，用空依赖的useEffect实现仅执行一次的赋值逻辑即可：

import { useState, useEffect } from 'react';

function SearchPage() {
  const [value, setValue] = useState('');

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    setValue(searchParams.get('q') || '');
  }, []); // 空依赖数组保证逻辑仅在组件首次挂载后执行一次

  return (
    <input 
      type="search" 
      name="q" 
      id="q" 
      value={value} 
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

内容的提问来源于stack exchange，提问作者Áron Pop Adorján