时间戳

首页 > 解决方案 > 使用反应钩子提交后清除输入

reactjs - 使用反应钩子提交后清除输入

问题描述

按钮提交后如何清除输入？我提交后输入的文本仍然存在。

非常感谢并非常感谢。再次感谢

const [value, setValue] = useState("");

 const handleInput = e => {
        setValue(e.target.value);
      };

    const onSubmit = (e) => {
        e.preventDefault();
        setValue("");
      }
    

    {
 dbdata.map(item => {
                    return(
                        <div className="card mb-5" key={item._id} style={{maxWidth:"70%",height:"70%"}} >
                            <img src={item.photo} className="card-img-top" alt="..." style={{maxWidth:"100%",height:"100%"}} />
                            <div className="card-body" >
                                <h6 className="card-text">{item.reviews.length} Reviews
                                <form className="input-group mb-3" onSubmit={onSubmit}>
                                    <input type="text" className="form-control" placeholder="add a post onChange={handleInput}  value={value} />
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary" onClick={(e) => {
                                          makePost(value, item._id)}} type="button">Post</button>
                                    </div>                    
                                </form>
                            </div>
                        </div>

                    )
                })
}

标签： reactjs

解决方案

您可以尝试使用 onSubmit 函数添加表单标签，该函数在阻止提交表单的默认行为后将值设置为空字符串

编辑：我看到你有一个 makePost 函数，我想你可以把这个函数的代码移到我的 onSubmit 中，或者把我的代码放在你的 makePost 函数中

const [value, setValue] = useState("");

 const handleInput = e => {
        setValue(e.target.value);
      };

  const onSubmit = (e) => {
    e.preventDefault();
    setValue("");
  }

<div className="input-group mb-3">
<form onSubmit={onSubmit}
   <input type="text" className="form-control" placeholder="add a post" onChange={handleInput} value={value} /></form>
        <div class="input-group-append">
          <button type="submit" class="btn btn-primary" onClick={(e) => {makePost(value, item._id)}} type="button">Post</button>
        </div>                    
</div>

推荐阅读