主页 / 问题 / 1400792
Accepted
Object417
Asked:2022-06-16 21:22:49 +0800 CST2022-06-16 21:22:49 +0800 CST

<TextField> material-ui 的视觉错误

  • 772

面临一个相当奇怪的视觉错误。我觉得还是看视频比较好： https ://youtu.be/P9mQo5WC-Os

问题是什么？

当焦点打开时，该字段有一个动画：占位符变小并移到顶部，当焦点丢失时，如果该字段为空，则返回其位置。但是，在表单被方法清除e.target.reset()或e.target.content.value = ""占位符停止响应焦点后。有一种感觉，程序认为字段中还有文本。这很奇怪，因为该领域已被清除。但是，如果在提交表单后，在字段中输入一些文本然后删除它，一切都会恢复正常。

CodeSandBox：https ://codesandbox.io/s/mui-textfield-bug-bv31r9?file=/src/App.js

javascript

0 个回答

  1. Best Answer

    我还没有找到一个明确的答案，为什么会出现这样的问题，但我找到了解决方案：为此，您需要使其input“受控”，即 通过 更新其值state。

    export default function App() {
  const [val, setVal] = useState("");

  const onChange = (e) => {
    setVal(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();

    console.log(e.target.content.value);

    setVal("");
  };

  return (
    <div className="App">
      <form onSubmit={onSubmit} id="someForm">
        <TextField
          id="someForm_content"
          name="content"
          label="Content"
          variant="standard"
          /* Now we control the input's value */
          value={val}
          onChange={onChange}
        />
        <Button type="submit" variant="contained" children="OK" />
      </form>
    </div>
  );
}

    更新的 CodeSandBox：https ://codesandbox.io/s/mui-textfield-bug-bv31r9?file=/src/App.js

    • 0

相关问题