React函数组件点击按钮清空输入框值的实现及组件选型咨询

我来逐个解答你的问题，结合你给出的代码分析问题所在，再给出可行的解决方案：

问题1：在无状态函数组件中，点击提交按钮时能否将输入框的值设置为空字符串？ #

答案是可以的，但你的现有代码存在逻辑漏洞，导致这个功能无法正常生效。

你把Admin组件的输入框value绑定到了props.item，这说明这是一个受控组件——输入框的值完全由外部props控制。点击Add按钮后，父组件通过this.setState({item: ""})更新状态，理论上props.item会变成空字符串，输入框应该随之清空。

但问题出在Admin组件的onChange逻辑：你把输入值赋值给了普通变量productName，但这个变量和输入框的value没有任何绑定关系。因为输入框的value是props.item，而你没有在输入时同步更新父组件的item状态，所以输入框根本不会显示你输入的内容，更别说后续清空了。

问题2：点击“Add”按钮后，如何清除Admin函数组件内输入框的值？是否需要改用类组件？ #

完全不需要改用类组件，函数组件（包括无状态组件或结合Hooks的组件）完全可以实现这个需求。我给你两种常用的解决方案：

方案1：父组件控制输入框状态（受控组件模式） #

这种模式下，输入框的状态完全由父组件管理，子组件只负责传递用户输入和触发提交：

修正后的父组件代码：

// 注意：不要直接修改原state数组，React状态应该保持不可变性
AddInfo(info){
  // 用扩展运算符创建新数组，避免修改原state
  const updatedProducts = [...this.state.products, {name: info.productName}];
  this.setState({
    products: updatedProducts,
    item: "" // 清空item，子组件会收到更新后的props
  })
  console.log(this.state.products);
}

// 父组件render时传递更新item的回调
render() {
  return (
    <Admin 
      item={this.state.item} 
      AddInfo={this.AddInfo} 
      onItemChange={(value) => this.setState({item: value})}
    />
  )
}

修正后的Admin组件代码：

function Admin(props){
  return (
    <div>
      <input 
        type="text" 
        required 
        placeholder="Product Name" 
        // 输入时调用父组件的回调，更新父组件的item状态
        onChange={(e) => props.onItemChange(e.target.value)} 
        // value绑定父组件传递的item
        value={props.item}
      /><br/>
      <button type="Submit" onClick={() => {
        props.AddInfo({productName: props.item});
      }}>Add</button>
    </div>
  )
}

修改后，输入时父组件的item状态会实时更新，输入框正常显示内容；点击Add按钮后，父组件把item设为空，输入框就会自动清空。

方案2：子组件自己维护输入状态（Hooks模式） #

如果不想让父组件管理输入框的状态，可以用React的useState钩子让Admin组件自己维护输入值，点击Add后直接清空：

import { useState } from 'react';

function Admin(props){
  // 子组件自己维护输入框的状态
  const [productName, setProductName] = useState("");
  
  return (
    <div>
      <input 
        type="text" 
        required 
        placeholder="Product Name" 
        onChange={(e) => setProductName(e.target.value)} 
        value={productName}
      /><br/>
      <button type="Submit" onClick={() => {
        // 把值传给父组件
        props.AddInfo({productName});
        // 点击后直接清空输入框
        setProductName("");
      }}>Add</button>
    </div>
  )
}

这种方式更简洁，子组件自主控制输入状态，父组件只负责接收提交的数据即可，不需要额外维护item状态。

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