0

编码

我有这个简单<form>的受控和非受控输入。

（codesandbox.io 的链接）

import React, { useState, useEffect, useRef } from "react";

const ControlledInput = () => {
  const [value, setValue] = useState("controlled");

  useEffect(() => {
    console.log("Controlled: useEffect() cause value has changed to " + value);
  }, [value]);

  console.log("Controlled: re-render with " + value);

  return (
    <div>
      <label>Controlled input</label>
      <input
        name={"controlled"}
        value={value}
        onChange={(ev) => setValue(ev.target.value)}
      />
    </div>
  );
};

const UncontrolledInput = () => {
  const [value, _setValue] = useState("uncontrolled");

  useEffect(() => {
    console.log(
      "Uncontrolled: useEffect() cause value has changed to " + value
    );
  }, [value]);

  console.log("Uncontrolled: re-render with " + value);

  return (
    <div>
      <label>Uncontrolled input</label>
      <input name={"uncontrolled"} defaultValue={value} />
    </div>
  );
};

const App = () => {
  return (
    <form>
      <ControlledInput />
      <UncontrolledInput />
    </form>
  );
};

export default App;

我期待什么

在每次输入值更改后查看console.log消息，包括受控和非受控输入

我能得到什么

它只发生在受控输入上，而不发生在不受控制的输入上。

问题

我了解 React 自己处理不受控制的输入。而且，不知何故，它避免了重新渲染的输入，原因value是在内部处理。但是......为什么这useEffect不是在进一步的value变化上运行？仅仅因为没有明确的setValue调用？

我对我之前的不完整假设的真实和良好的解释很感兴趣，但最重要的是：

我怎样才能使它useEffect真正运行任何时间value更改？

4

0 回答 0