React中如何清除多个独立输入组件的输入值

Hey there! I see the issue you're facing—your clear button is updating the parent state but not the input fields in your LabeledTextInput components. Let's break down why this is happening and fix it.

问题根源 #

Right now, each LabeledTextInput is managing its own internal state with useState. The parent App component only gets the value when the input loses focus (via onBlur). When you click "Clear Inputs" and set the parent state to an empty string, the child components have no idea this happened—their local state still holds the user's input, so the input fields stay populated.

解决方案：状态提升（React推荐方式） #

The fix here is to lift the state up to the parent App component. This way, all input values are controlled by the parent state, and clearing them will automatically update the child components.

Here's how to modify your code:

修改后的App.js

import { useEffect, useRef, useState } from 'react';
import './App.css';
import LabeledTextInput from './components/LabeledTextInput';

function App() {
  const data = useRef(document.getElementById('FIELD_555'));
  // Initialize state with keys matching your input labels (lowercase)
  const [formState, setFormState] = useState({
    name: '',
    title: '',
    company: ''
  });

  const handleUpdate = (key, value) => {
    setFormState(prevState => ({ ...prevState, [key]: value }));
  };

  const handleClear = () => {
    // Reset all input values to empty strings
    setFormState({
      name: '',
      title: '',
      company: ''
    });
  };

  useEffect(() => {
    data.current.value = JSON.stringify(formState);
  }, [formState]);

  return (
    <div>
      {/* Pass value and onChange handler to each child component */}
      <LabeledTextInput 
        label='Name' 
        value={formState.name}
        handleUpdate={handleUpdate} 
      />
      <LabeledTextInput 
        label='Title' 
        value={formState.title}
        handleUpdate={handleUpdate} 
      />
      <LabeledTextInput 
        label='Company' 
        value={formState.company}
        handleUpdate={handleUpdate} 
      />
      <button onClick={handleClear}>Clear Inputs</button>
    </div>
  );
}

export default App;

修改后的LabeledTextInput.js

// No need for local useState anymore—we'll use props instead
const LabeledTextInput = ({ label, value, handleUpdate }) => {
  const inputName = label.toLowerCase();

  return (
    <div>
      <label>{label}</label>
      <input 
        type='text' 
        name={inputName} 
        value={value} 
        onChange={e => handleUpdate(inputName, e.target.value)} 
        onBlur={e => handleUpdate(inputName, e.target.value)} 
      />
    </div>
  );
};

export default LabeledTextInput;

为什么这样有效？ #

Now, every input field's value is directly tied to the parent formState. When you click "Clear Inputs", we reset formState to empty strings, and since each child component receives value as a prop, React will automatically re-render the inputs with the empty values.

If you want a more scalable solution (in case you add more inputs later), you could dynamically reset the state by looping through its keys instead of hardcoding them:

const handleClear = () => {
  const emptyState = Object.fromEntries(
    Object.keys(formState).map(key => [key, ''])
  );
  setFormState(emptyState);
};

That way, you don't have to update the clear function every time you add a new input.

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