React中Button onClick无法重置Input文本框的技术求助

问题说明 #

需要实现点击Reset按钮清空SearchText输入框的功能，但当前按钮点击后无法生效，同时希望理解React中JavaScript函数的工作机制。

现有代码 #

import { useCallback, useState } from 'react';
import { faMagnifyingGlass, faPeopleGroup, faBuildingUser, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import utilStyles from '../styles/utils.module.css';

const SearchText = ({ cards, setSearchResults, setEnteredText }) => {

  const enteredText = ' ';

  const onChangex = useCallback((event) => {
    var enteredText = event.target.value;
    setEnteredText(enteredText);
  }, []);

  const onFormSubmit = (event) => {
    event.preventDefault();
  }
  
  const onChange = (event) => {
    if (!event.target.value) return setSearchResults(cards);

    const fields = ['NAME', 'CAMPUS', 'DEPARTMENT', 'JOBTITLE'];
    const query = event.target.value.toLowerCase();

    const filterData = (cards, fields, query) => {
      return cards.filter(record => fields.some(field => record[field]?.toLowerCase().includes(query)));
    };

    setSearchResults(filterData(cards, fields, query));
  }

  const onReset = (event) => {
    console.log("Clicked Reset");
    const container = document.getElementById("SearchText");
    container.reset();
  }

  const resetSearchInput = (event) => {
    console.log("Clicked");
    var enteredText = event.target.value;
    setEnteredText(enteredText);
  }

  return (
    <>
      <form id='EmployeeSearchText' onSubmit={onFormSubmit}>
        <div className="container-fluid p-3">
          <div id='Row1' className={`row ${utilStyles.divPadding}`}>
            <div id='Row1Column1' className="col">
              <div id='SearchText-container' className={utilStyles.searchBar}>
                <FontAwesomeIcon icon={faMagnifyingGlass} className={utilStyles.icon} />
                <input id='SearchText' type="text" onChange={onChange} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" placeholder="Search Last Name; First Name; Campus; Deparment....." />
              </div>
            </div>
          </div>
          <div className='text-center'>
            <div id='Row2' className={`row ${utilStyles.divPadding}`}>
              <div id='Row2Column1' className="col">
                <div id='Employees-container'>
                  <button id='EmployeeListing' className={utilStyles.btnYellow}>Employees&nbsp;&nbsp;<FontAwesomeIcon icon={faPeopleGroup} /></button>
                </div>
              </div>
              <div id='Row2Column2' className="col">
                <div id='DepartmentListing-container'>
                  <button id='DepartmentListing' className={utilStyles.btnYellow} type="button">Department Listing&nbsp;&nbsp;<FontAwesomeIcon icon={faBuildingUser} /></button>
                </div>
              </div>
              <div id='Row2Column3' className="col">
                <div id='SearchTextReset-container'>
                  <button id='SearchTextReset' onClick={onReset} className={utilStyles.btnGrey} type="button">Reset&nbsp;&nbsp;<FontAwesomeIcon icon={faArrowsRotate} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>     
    </>
  )
}

export default SearchText;

问题根源 #

• 输入框未与状态绑定：当前输入框是非受控组件，内容由DOM自身管理，无法通过React状态直接控制清空操作；
• reset方法调用错误：container.reset()是表单元素的方法，你却调用在了input元素上，自然无效；
• 状态值误用：组件内部定义了const enteredText = ' ';，但未使用父组件传递的状态值，导致状态与输入框内容完全脱节；
• 冗余代码干扰：onChangex和resetSearchInput函数未被实际使用，逻辑混乱。

修复方案 #

步骤1：完善组件props，绑定受控输入框 #

从props接收父组件传递的enteredText状态，将输入框改为受控组件，通过value属性绑定状态，确保输入框内容与React状态同步。

步骤2：修正重置逻辑 #

在onReset函数中，通过调用setEnteredText清空状态，同时重置搜索结果为原始数据，确保UI与状态一致。

步骤3：清理冗余代码 #

删除未使用的onChangex和resetSearchInput函数，简化逻辑。

修复后的完整代码 #

import { useCallback } from 'react';
import { faMagnifyingGlass, faPeopleGroup, faBuildingUser, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import utilStyles from '../styles/utils.module.css';

// 接收父组件传递的enteredText状态
const SearchText = ({ cards, setSearchResults, enteredText, setEnteredText }) => {

  const onFormSubmit = (event) => {
    event.preventDefault();
  }
  
  const onChange = (event) => {
    const inputValue = event.target.value;
    setEnteredText(inputValue);
    
    if (!inputValue) {
      setSearchResults(cards);
      return;
    }

    const fields = ['NAME', 'CAMPUS', 'DEPARTMENT', 'JOBTITLE'];
    const query = inputValue.toLowerCase();

    const filterData = (cards, fields, query) => {
      return cards.filter(record => fields.some(field => record[field]?.toLowerCase().includes(query)));
    };

    setSearchResults(filterData(cards, fields, query));
  }

  const onReset = () => {
    console.log("Clicked Reset");
    // 清空输入框状态
    setEnteredText('');
    // 重置搜索结果为原始数据
    setSearchResults(cards);
  }

  return (
    <>
      <form id='EmployeeSearchText' onSubmit={onFormSubmit}>
        <div className="container-fluid p-3">
          <div id='Row1' className={`row ${utilStyles.divPadding}`}>
            <div id='Row1Column1' className="col">
              <div id='SearchText-container' className={utilStyles.searchBar}>
                <FontAwesomeIcon icon={faMagnifyingGlass} className={utilStyles.icon} />
                {/* 绑定value到enteredText，成为受控组件 */}
                <input 
                  id='SearchText' 
                  type="text" 
                  onChange={onChange} 
                  value={enteredText}
                  className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} 
                  name="SearchText" 
                  placeholder="Search Last Name; First Name; Campus; Department....." 
                />
              </div>
            </div>
          </div>
          <div className='text-center'>
            <div id='Row2' className={`row ${utilStyles.divPadding}`}>
              <div id='Row2Column1' className="col">
                <div id='Employees-container'>
                  <button id='EmployeeListing' className={utilStyles.btnYellow}>Employees&nbsp;&nbsp;<FontAwesomeIcon icon={faPeopleGroup} /></button>
                </div>
              </div>
              <div id='Row2Column2' className="col">
                <div id='DepartmentListing-container'>
                  <button id='DepartmentListing' className={utilStyles.btnYellow} type="button">Department Listing&nbsp;&nbsp;<FontAwesomeIcon icon={faBuildingUser} /></button>
                </div>
              </div>
              <div id='Row2Column3' className="col">
                <div id='SearchTextReset-container'>
                  <button id='SearchTextReset' onClick={onReset} className={utilStyles.btnGrey} type="button">Reset&nbsp;&nbsp;<FontAwesomeIcon icon={faArrowsRotate} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>     
    </>
  )
}

export default SearchText;

关键原理说明 #

在React中，受控组件是指表单元素的值由React状态控制，通过value属性绑定状态，onChange事件更新状态。这种模式下，组件的UI完全由状态驱动，避免了直接操作DOM的问题。重置功能本质就是将状态设为空字符串，React会自动同步更新输入框的内容。

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