我有一个 MUI TextField
输入,我想在它发生变化时做一些事情,而不阻止它的 native 处理(不让它受控输入)
<TextField onChange={(e)=>{
something(e.target.value)
//maybe continueDefault() to make it still accept input
}}/>
我如何让它继续其默认操作,即允许它在使用数据调用我的 something()
函数后接收和附加文本输入?
我想在不必使输入成为受控输入
的情况下实现这一点,而无需使用state
来存储其值。
最佳答案
您是否尝试过当前的解决方案?仅传递 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>
关于javascript - React Material UI TextField onchange 处理程序继续默认操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72575265/