useRef reset textInput by Clicking button

Question

i am using material-ui for my project and i am doing function to reset text of input to empty when clicking an outer button, it seem like not worked out

this is my code

var inputRef = useRef(null)

assign inputRef to the input field to access DOM

<TextField label="Student Name" ref={inputRef} />

an outer button to reset text field to empty when click it:

 <Button variant="contained" color="primary" onClick={() => {inputRef.current.value = ""}}> Reset </Button>

and it unchanged, if it is possible, please modify the code in the codesandbox link here, thank you so much

Viet Dinh · Accepted Answer · 2020-10-07 04:33:45Z

You do incorrectly in step: assign inputRef to the input field to access DOM. It should be a ref of input element instead text field component (actual a div).

You should have state for value of Textfield Or using inputRef instead of ref to point to input element. Demo

import React, { useRef } from "react"; import { TextField, Button } from "@material-ui/core"; import "./styles.css"; export default function App() { var inputRef = useRef(null); return ( <div className="App"> <TextField label="Student Name" inputRef={inputRef} /> <Button onClick={() => { console.log(inputRef); inputRef.current.value = ""; }} variant="contained" color="primary" > Reset </Button> </div> ); }

Rohitha · Accepted Answer · 2020-10-07 05:56:33Z

useRef can be used on html DOM elements(<input/>). To pass ref to Material-UI input you should use inputRef property.

Please refer How can I use ref in TextField

 var inputRef = useRef(null); <TextField label="Student Name" inputRef={inputRef} />

demo

Collectives™ on Stack Overflow

useRef reset textInput by Clicking button

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related