javascript - 当输入位于无状态功能组件中时，单击提交按钮时可以将输入框的值设置为空字符串吗？

Question

点击“添加”按钮后，如何清除 Admin 函数中输入的值？我应该使用另一个基于类的组件而不是功能组件吗？

我已将其中一个输入框的值设置为:value={props.item}，并在 this.setState 中将 item 的值更新为 item:""。

  AddInfo(info){
    let s = this.state.products;
    let obj ={name:""};
    obj.name=info.productName;

    s.push(obj);

    this.setState({
      products:s,
      item:"" //Here i set the value of item equal to an empty string.
    })
    console.log(this.state.products);
  }



function Admin(props){

    let productName="";

    return (
        <div>            
            <input type="text" required placeholder="Product Name" onChange={(e)=>{productName=e.target.value}} value={props.item}></input><br/>

   <button type="Submit" onClick{(e)=>props.AddInfo({productName})}>Add</button>
     </div>
    )
}

Answer 1

您必须将输入保存在输入函数的本地状态中:

 AddInfo(info){
    let s = this.state.products;
    let obj ={name:""};
    obj.name=info.productName;

    s.push(obj);

    this.setState({
      products:s,
    })
    console.log(this.state.products);
    }



function Admin(props){

    const [productName, setProductName] = useState('');

    return (
        <div>            
            <input type="text" required placeholder="Product Name" onChange={(e)=> setProductName(e.target.value) value={productName}></input><br/>
   <button type="Submit" onClick{(e)=> {props.AddInfo({productName}); setProductName('')}}>Add</button>
 </div>
)
}

这对您有用，因为您不再改变 ProductName 变量，但现在您将其保存在该输入函数的本地状态中。

希望这有帮助!