Question

我输入了文字。如果单击页面中的特定按钮，我想重置输入的值。这是我的代码：

bool(tf.reduce_all(tnsr > 3))

它不起作用。该如何解决？

Answer 1

reset在form元素上可用。您可以使用表单包装输入内容，并在其上触发reset。

const {useRef} = React;
const App = () => {
  const formRef = useRef();

  const handleClick = () => {
    formRef.current.reset();
    return 'hello world';
  };

  return (
    <form ref={formRef}>
      <input type="text" />
      <button onClick={handleClick} type="button">
        delete all
      </button>
    </form>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您可以在输入字段中清除值，如下所示。

const handleClick= () => {
 inputRef.current.value = "";
 return "hello world"
}

并在如下所示的按钮中更改onClick呼叫

onClick={handleClick}
//or
onClick={()=> handleClick()}

如果要完全重置具有多个输入的表单，可以采用以下方法。在下面的示例中，表单将在提交后重置


const formRef = useRef();

const handleClick = () => { 
  formRef.current.reset();
}

render() {
  return (
    <form ref={formRef}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

如果您不想使用参考

const handleSubmit = e => {
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={handleSubmit}>
  ...
</form>

Answer 3

您可以通过将文本输入字段的值设置为空字符串来清除它。如果您想使用不受控制的输入，可以像inputref.current.value = ""那样做。

但是，如果要使用受控输入，则可以创建一个状态变量来跟踪输入字段的值。例如，

const SomeComponent = () => {
  const [text, setText] = useState('')

  return (
    <>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText('')}>delete all</button>
    </>
  );
};

这是两个实现的codesandbox。

Answer 4

您有两个问题，一个是您要传递一个将函数调用到onClick处理程序中的函数-不需要。如果在渲染之前定义函数，则无需将匿名函数传递给onClick处理程序。

// Before
<button onClick={()=> handleClick}>delete all</button>

// After
<button onClick={handleClick}>delete all</button>

另一个问题是您的handleClick函数调用reset，这不是输入上的函数。要重置引用输入的值，可以将其设置为空字符串（或任何您想要的“默认”值）。

  const handleClick = e => {
   inputRef.current.value = "";
   return "hello world";
  };

如何在React中从useRef重置输入字段？

4 个答案: