如何通过React父组件的重置按钮将MUI子组件输入重置为null

我有一个包含多个筛选子组件和重置按钮的React父组件，希望点击「重置」按钮时，将所有筛选子组件的输入值重置为初始状态（空/null）。

父组件代码：

return (
  <Box sx={{ display: 'flex' ,bgcolor:"white",gap:"1.25rem",alignItems:"center", justifyContent:"center", borderRadius:"1.5rem",padding:"1rem 0rem",margin:"0.5rem 11rem" }}  >
      <LocationInput  setTempObj={setTempObj} />
      <Divider orientation="vertical" flexItem/>
      <DateInput  setTempObj={setTempObj} />
      <Divider orientation="vertical" flexItem/>
      <PriceInput  setTempObj={setTempObj}/>
      <Divider orientation="vertical" flexItem/>
      <TypeInput  setTempObj={setTempObj} />
      <Divider orientation="vertical" flexItem/>
      <Box sx={{display:"flex"}} >
          <Button  handleClick={handleClick} customClass={"bg-violet-600 text-white hover:bg-violet-700 transition-all px-8 py-4 "} text={"Search"} />
          <Button handleClick={deleteAllFilters}  customClass={"bg-red-600 text-white hover:bg-red-700 transition-all "} text={"Reset"} />
      </Box>
  </Box>
)

以TypeInput为例，子组件当前自行维护状态：

const [range, setRange] = React.useState("");
const menuItems=[
  {
    text:'House',
  },
  {
    text:'Office',
  },
  {
    text:'Industry',
  }
];
const handleChange = (event) => {
  setRange(event.target.value);
  const set=menuItems[event.target.value].text;
  setTempObj((prevState)=>({
    ...prevState,
    type:set,
  }))
};

return (
  <Box sx={{height:"100%"}}>
  <Typography fontWeight="600" variant='body1' color="gray" marginBottom="1rem" >
      Property Type
    </Typography>
  <FormControl sx={{minWidth: 120 }} size="small">
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={range}
      label=""
      onChange={handleChange}
    >
      {menuItems.map((item,index)=>{
        return(
          <MenuItem key={index} value={index}>{item.text}</MenuItem>
        )
      })}
    </Select>
  </FormControl>
</Box>

解决方案：状态提升+受控组件 #

React单向数据流特性决定了父组件无法直接修改子组件内部状态，最直接的解决方式是将子组件的状态提升到父组件统一管理，把所有筛选子组件改成受控组件。

步骤1：父组件统一管理筛选状态 #

确保父组件的tempObj包含所有筛选字段的初始值：

const [tempObj, setTempObj] = useState({
  location: '',
  date: '',
  price: '',
  type: '' // 对应TypeInput的初始状态
});

步骤2：修改重置函数deleteAllFilters #

直接重置tempObj的所有筛选字段：

const deleteAllFilters = () => {
  setTempObj({
    location: '',
    date: '',
    price: '',
    type: ''
  });
};

步骤3：改造子组件为受控组件（以TypeInput为例） #

移除子组件内部的useState，改为接收父组件传入的value和onChange属性：

// TypeInput.jsx
const TypeInput = ({ value, onChange }) => {
  const menuItems=[
    { text:'House' },
    { text:'Office' },
    { text:'Industry' }
  ];

  const handleChange = (event) => {
    const selectedIndex = event.target.value;
    const selectedText = menuItems[selectedIndex].text;
    // 通知父组件更新状态
    onChange(selectedText);
  };

  // 根据父组件传入的value反向匹配选中索引
  const selectedIndex = menuItems.findIndex(item => item.text === value);

  return (
    <Box sx={{height:"100%"}}>
      <Typography fontWeight="600" variant='body1' color="gray" marginBottom="1rem" >
        Property Type
      </Typography>
      <FormControl sx={{minWidth: 120 }} size="small">
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={selectedIndex === -1 ? '' : selectedIndex}
          label=""
          onChange={handleChange}
        >
          {menuItems.map((item,index)=>{
            return(
              <MenuItem key={index} value={index}>{item.text}</MenuItem>
            )
          })}
        </Select>
      </FormControl>
    </Box>
  );
};

步骤4：父组件传递props给子组件 #

修改父组件中TypeInput的调用方式，传入value和onChange：

<TypeInput 
  value={tempObj.type} 
  onChange={(newType) => setTempObj(prev => ({...prev, type: newType}))} 
/>

其他子组件的改造逻辑 #

LocationInput、DateInput、PriceInput遵循同样模式：

1. 移除子组件内部的状态管理代码
2. 接收父组件传入的value和onChange属性
3. 输入变化时调用onChange通知父组件更新状态
4. 渲染时使用父组件传入的value作为输入控件的当前值

方案优势 #

通过状态提升，父组件完全掌控所有筛选条件的状态，重置按钮只需修改父组件状态，所有子组件会自动根据新的value重新渲染，实现清空效果。这种模式符合React单向数据流设计理念，状态变更逻辑清晰，便于后续维护和扩展。

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