Monday, December 11, 2023
 Popular · Latest · Hot · Upcoming
rated 0 times [  71] [ 1]  / answers: 1 / hits: 13045  / 2 Years ago, fri, june 10, 2022, 12:00:00

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)=>{
//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.

More From » reactjs


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.

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

function something(value) {

function App() {
return (
onChange={(e) => {

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

<link rel=stylesheet href=,400,500,700&display=swap />
<script crossorigin src=></script>
<script crossorigin src=></script>
<script crossorigin src=></script>
<div id=root></div>

[#97] Tuesday, May 24, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 92
Total Questions: 88
Total Answers: 96

Location: China
Member since Fri, Jan 15, 2021
3 Years ago
dylondaytond questions
Tue, Jun 22, 21, 00:00, 3 Years ago
Thu, May 7, 20, 00:00, 4 Years ago
Fri, Aug 16, 19, 00:00, 4 Years ago