点击“添加”按钮后,如何清除 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>
)
}
最佳答案
您必须将输入保存在输入函数的本地状态中:
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 变量,但现在您将其保存在该输入函数的本地状态中。
希望这有帮助!
关于javascript - 当输入位于无状态功能组件中时,单击提交按钮时可以将输入框的值设置为空字符串吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57429655/