javascript - 可以撤消另一个组件在文本字段中的状态更改吗？

Question

Material UI 中的受控 TextField 是否可以撤消另一个组件对其状态的更改？

在下面的示例中，单击“测试假事件”和“测试集状态”按钮会导致 TextField 中的更改无法通过默认浏览器“撤消”机制撤消。

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function StateTextFields() {
  const [name, setName] = React.useState("Cat in the Hat");
  const handleChange = (event) => {
    setName(event.target.value);
  };
  const ref = React.useRef(null);

  const fakeEvent = (text, ref) => {
    var e = new Event("input");
    e.currentTarget = ref;
    ref.value = text;
    setName(text);
  };
  return (
    <div>
      <TextField
        id="filled-name"
        label="Name"
        value={name}
        onChange={handleChange}
        variant="filled"
        inputRef={ref}
      />
      <button onClick={() => fakeEvent("test one", ref)}>
        {" "}
        test fake event
      </button>
      <button onClick={() => setName("test two")}> test set state</button>
    </div>
  );
}

https://codesandbox.io/s/material-demo-forked-685w8?file=/demo.js:105-120

有哪些选择？UseHistory 钩子https://usehooks.com/useHistory/？

标签： javascriptreactjsmaterial-ui