CODEWITHSUNDEEP
reactjsmaterial-ui
Shubham
Shubham

Reputation: 1201

clear the material UI text field Value in react

How to clear the materialUI textfield value in react?

Check the below code - 

<TextField
  hintText=""
  ref={(node) => this._toField = node}
  onChange={this.changeToText}
  floatingLabelText="To*"
  floatingLabelFixed={true}
  fullWidth={true}
/>

I'm using the raisedButton while pressing it validate the above field. If the field has error then displaying the error message. If not, then we need to clear the input. But how can we clear the input text?

Upvotes: 6

Views: 20100

Answers (4)

beforeitstoolate
beforeitstoolate

Reputation: 11

try this

import { Button, Container, InputBase } from '@material-ui/core'
import React, { useState } from 'react'

const ClearText = ()=> {

    const [text , setText] = useState("")

const clearTextField = () => setText("")

    return (
        <Container>
        <InputBase 
        value={text ? text : ""}
        onChange={(e)=>setText(e.target.value)}
        />


        <Button onClick={clearTextField} > Clear </Button>
        </Container>
    )
};

export default ClearText;

Upvotes: 0

44kksharma
44kksharma

Reputation: 2830

if you are using a stateless functional component then you can use react hooks.

Also make sure you are using inputRef

import React, { useState, useRef } from "react";

let MyFunctional = props => {
  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.value = "";
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};

Upvotes: 7

Shrey Kejriwal
Shrey Kejriwal

Reputation: 736

There is a value property that you have to pass to the TextField component. check example below:

class SomeComponent extends Component {
  state = {value: ''}
  resetValue = () => {
    this.setState({value: ''});
  }
  render() {
    return (
      <div>
        <TextField
          ...
          value={this.state.value}
        />
        <button onClick={this.resetValue}>Reset</button>
      </div>
    )
  }
}

Upvotes: 0

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

You need to, somehow, store the input's value. State seems to be an initial approach in this case. Whenever the text changes, you have to update the state. Same applies when you click the button and click the input's value afterwards: 

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      value: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleChange(event) {
    this.setState({ value: event.target.value })
  }

  handleClick() {
    // validation...
    this.setState({ value: '' })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange}/>
        <button onClick={this.handleClick}>Click-me</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: -1

Related Questions