React TypeScript中如何实现类似document.getElementById()获取输入框值？

问题原因 #

你直接通过document.getElementById()操作DOM的方式不符合React的数据流逻辑，且可能因React虚拟DOM与真实DOM的更新时机差异，导致无法获取到最新输入值，所以console输出为空。React推荐通过受控组件或Ref处理表单输入，而非直接操作DOM。

解决方案1：使用受控组件（推荐） #

受控组件通过React State管理输入值，onChange触发时直接从事件对象中取值，无需操作DOM：

1. 初始化组件状态 #

在类组件的constructor中添加状态存储搜索文本：

constructor(props) {
  super(props);
  this.state = {
    searchText: ''
  };
  // 绑定this，确保input函数中this指向组件实例
  this.input = this.input.bind(this);
}

2. 修改input处理函数 #

直接通过事件参数获取输入值，转为小写后存入State：

input(event: React.ChangeEvent<HTMLInputElement>) {
  const defaultText = event.target.value;
  console.log(defaultText);
  const lowerCaseText = defaultText.toLowerCase();
  console.log(lowerCaseText);
  // 将小写文本存入State，后续可直接从State取用
  this.setState({ searchText: lowerCaseText });
}

3. 更新input元素 #

为input添加value属性绑定State，实现双向数据绑定：

<Row>
  <input 
    type="search" 
    id="form1" 
    onChange={this.input} 
    placeholder="Søk etter oppskrift.."
    value={this.state.searchText}
  />
</Row>

解决方案2：使用Ref（非受控组件） #

若不想用State管理，也可通过React Ref获取DOM元素：

1. 创建Ref #

在类组件中定义Ref：

form1Ref = React.createRef<HTMLInputElement>();

2. 绑定Ref到input元素 #

将Ref关联到input：

<Row>
  <input 
    type="search" 
    ref={this.form1Ref} 
    onChange={this.input} 
    placeholder="Søk etter oppskrift.."
  />
</Row>

3. 通过Ref获取输入值 #

在input函数中从Ref读取值：

input() {
  // 先判断Ref是否已挂载到DOM
  if (this.form1Ref.current) {
    const defaultText = this.form1Ref.current.value;
    console.log(defaultText);
    const lowerCaseText = defaultText.toLowerCase();
    console.log(lowerCaseText);
  }
}

总结 #

优先选择受控组件方案，它更符合React状态管理理念，能避免直接操作DOM带来的潜在问题。后续需使用搜索文本时，直接从this.state.searchText获取即可。

内容的提问来源于stack exchange，提问作者felixking2