React：如何从父组件获取自定义Input组件的值？

你遇到的document.getElementById(id).value返回null的问题，主要有两个核心原因，同时你的代码也不符合React的组件化设计思路，我来一步步帮你解决：

为什么会返回null？ #

• 子组件未正确传递id属性：你在父组件给StateBox传了id="Firma"，但StateBox组件里的<input>根本没接收这个id props，所以页面上的input元素并没有设置id="Firma"，自然用getElementById找不到它。
• React渲染时机问题：即使你给input加上了id，在父组件的render方法里直接调用document.getElementById也不可靠——React的render执行时，对应的DOM节点可能还没被挂载到页面上，这时候获取DOM元素就会返回null。

而且更重要的是：React不推荐直接操作DOM来获取组件值，我们应该用React的「状态提升」思路来实现父子组件的数据同步。

正确的解决方案：状态提升 #

把原本在StateBox里维护的输入状态，提升到父组件AdressenListe中，让父组件统一管理搜索值，子组件只负责渲染输入框并通知父组件更新状态。

修改后的StateBox组件（改成受控组件） #

import React, {Component} from 'react';
export default class StateBox extends Component {
  render(){
    // 接收父组件传的id、value和onChange事件
    const { id, value, onChange } = this.props;
    return(
      <form className="StateBox">
        <input 
          type="text" 
          id={id}  // 把父组件传的id赋值给input
          value={value} 
          onChange={onChange}
        />
      </form>
    );
  }
}

修改后的AdressenListe组件（管理状态并过滤数据） #

import StateBox from './StateBox.js';
import React, { Component } from 'react';
export default class AdressenListe extends Component {
  // 父组件维护搜索状态
  constructor(props) {
    super(props);
    this.state = {
      searchFirma: '',
      searchPLZ: ''
    };
  }

  // 定义统一的状态更新方法
  handleSearchChange = (fieldName) => (event) => {
    this.setState({
      [fieldName]: event.target.value
    });
  }

  render() {
    // 直接从state中获取搜索值，不用操作DOM
    const { searchFirma, searchPLZ } = this.state;
    let filteredAdressen = this.props.adressen.filter(asingle => {
      // 这里可以根据需要同时处理Firma和PLZ的过滤
      const matchesFirma = asingle.Firma.toLowerCase().includes(searchFirma.toLowerCase());
      const matchesPLZ = asingle.PLZ?.toString().toLowerCase().includes(searchPLZ.toLowerCase());
      return matchesFirma && matchesPLZ; // 按需调整过滤逻辑
    });
    var anzahl = filteredAdressen.length;

    return (
      <div>
        {/* 给子组件传id、value和onChange方法 */}
        <StateBox 
          id="Firma" 
          value={searchFirma} 
          onChange={this.handleSearchChange('searchFirma')} 
        />
        <StateBox 
          id="PLZ" 
          value={searchPLZ} 
          onChange={this.handleSearchChange('searchPLZ')} 
        />
        <div>共找到 {anzahl} 条结果</div>
        {/* 这里可以渲染filteredAdressen的列表 */}
      </div>
    );
  }
}

为什么这样做更好？ #

• 符合React单向数据流：状态统一由父组件管理，子组件只做纯展示和事件传递，避免了DOM操作带来的状态不一致问题。
• 数据更可控：父组件可以直接获取所有搜索值，方便进行过滤、提交等后续操作。
• 组件复用性更强：StateBox变成了通用的受控输入组件，可以在任何需要输入的场景中复用。

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