javascript - React Material UI TextField onchange 处理程序继续默认操作

Question

我有一个 MUI TextField 输入，我想在它发生变化时做一些事情，而不阻止它的 native 处理(不让它受控输入)

<TextField onChange={(e)=>{
    something(e.target.value)
    //maybe continueDefault() to make it still accept input
}}/>

我如何让它继续其默认操作，即允许它在使用数据调用我的 something() 函数后接收和附加文本输入？

我想在不必使输入成为受控输入的情况下实现这一点，而无需使用state来存储其值。

Answer 1

您是否尝试过当前的解决方案？仅传递 onChange 属性而不传递 value 不会使其成为受控组件，而这正是您想要的。也没有理由使用假设的 continueDefault()，因为从未调用过 e.preventDefault()。

您当前的解决方案似乎工作正常，并且不会阻止进一步编辑文本字段。

function something(value) {
  console.log(JSON.stringify(value));
}

function App() {
  return (
    <MaterialUI.TextField
      onChange={(e) => {
        something(e.target.value);
      }}
    />
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@mui/material@5/umd/material-ui.development.js"></script>
<div id="root"></div>