React Material UI TextField onchange handler continue default action-CodePudding

I have a MUI TextField input, that I want to do something when it changes, without preventing its native handling (without making it controlled input)

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

How can I make it continue its default action, which is to allow it to receive and append text inputs after invoking my something() function with the data?

I wanted to allow this without having to make the input a controlled input, which is without using a state to store its value.

CodePudding user response：

Have you tried your current solution? Passing just the onChange property without the value doesn't make it an controlled component, which is what you want. There is also no reason to use the hypothetical continueDefault(), since e.preventDefault() is never called.

You're current solution seems to work fine, and doesn't stop the text field from being further edited.

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>

CodePudding user response：

I think you shoud use a ref, and ad and event handler. Something like that (untested)

const MyComponent = () => {
  
    const ref = useRef();

    useEffect(() => {
        const onChange = () => {
            something(ref.current.value)
        }
        ref.current.addEventListerner("change", onChange)
        return () => {
            ref.current.removeEventListener("change", onChange)
        }
    })

    return (
        <input ref={ref} />
    )

}
    const ref = useRef();

    useEffect(() => {
        const onChange = () => {
            something(ref.current.value)
        }
        ref.current.addEventListerner("change", onChange)
        return () => ref.current.removeEventListener("change", onChange)
    })

    return (
        <input ref={ref} />
    )

}