Question

70

React Material UI TextField onchange handler continue default action

rated 0 times [ 71] [ 1] / answers: 1 / hits: 13095 / 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)=>{

    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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylondaytond

Add To Favorites

Follow

Total Points: 92

Total Questions: 88

Total Answers: 96

Location: China

Member since Fri, Jan 15, 2021

3 Years ago

dylondaytond questions

1 React Autocomplete with Material UI

Tue, Jun 22, 21, 00:00, 3 Years ago

1 ERROR Error: formGroup expects a FormGroup instance. Please pass one in

Tue, Sep 22, 20, 00:00, 4 Years ago

1 Implicitly checking if axios call was success

Thu, May 7, 20, 00:00, 4 Years ago

1 Vue split components from a single .js file in multiple files

Fri, Feb 21, 20, 00:00, 4 Years ago

1 webpack -p --mode production is not working

Fri, Aug 16, 19, 00:00, 5 Years ago

View All

answered 2 Years ago brodyfrancisi · Accepted Answer

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) {

  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>