如何在 React.js 中不使用 onSubmit 清除输入字段

Posted

技术标签:

【中文标题】如何在 React.js 中不使用 onSubmit 清除输入字段【英文标题】:How to clear input field without using onSubmit in React.js 【发布时间】:2021-09-03 19:54:20 【问题描述】:

我尝试通过为输入字段赋予 value 属性来重置输入字段,但它给出了如下错误: value 只能与 onChange 一起使用。 有什么方法可以重置输入框吗?

import  useState  from "react";
import List from "./List";
import "./Form.css";
import iconSun from "../images/icon-sun.svg";

const Form = (props) => 

const [input, setInput] =useState("")

  const inputHandler = (event) => 
    setInput(event.target.value)
    if (event.key === "Enter") 
      const data = 
        name: input,
        id: Math.floor(Math.random().toFixed(4) * 10000).toString()
      
        props.eventHandler(data)
    
    setInput("")
  ;

  return (

    <div className="toform">
      <div className="heading">
        <h1>Todo</h1>
        <img src=iconSun  className="imgs" />
        <input type="text" onKeyPress=inputHandler value=input />
      </div>
      <List lists=props.name />
    </div>
 );
;
export default Form;

【问题讨论】:

【参考方案1】:

这可能意味着您需要在输入中添加一个onChange 属性,该属性将监听input 值的变化以更新值

<input 
  type="text" 
  onKeyPress=inputHandler 
  value=input 
  onChange=(e) => setInput(e.target.value) 
/>

【讨论】:

感谢您的帮助。这一项有效,但需要在 inputHandler 函数中添加另一段代码才能重置输入字段。将 onChange 设置为 event.target.value 后,我们需要在 inputHandler 中添加 setInput("") 来完全重置 const inputHandler = (event) => if (event.key === "Enter") const data = name: input, id: Math.floor(Math.random().toFixed(4) * 10000).toString() props.eventHandler(data) setInput("") 像这样。谢谢

以上是关于如何在 React.js 中不使用 onSubmit 清除输入字段的主要内容,如果未能解决你的问题,请参考以下文章

Axios 发布请求在 React JS 中不起作用

引导模式在 React JS 中不起作用

命名路径在 react-router-dom react js 中不起作用

外部Javascript在react.js中不起作用

React.js 地理位置在 iPhone/Android 上的浏览​​器中不起作用

api 请求中不接受 REACT.js 变量