0 votes
in ReactJS by
What are uncontrolled components?

1 Answer

0 votes
by

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

In the below UserProfile component, the name input is accessed using ref.

class UserProfile extends React.Component {

  constructor(props) {

    super(props)

    this.handleSubmit = this.handleSubmit.bind(this)

    this.input = React.createRef()

  }

  handleSubmit(event) {

    alert('A name was submitted: ' + this.input.current.value)

    event.preventDefault()

  }

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          {'Name:'}

          <input type="text" ref={this.input} />

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}

In most cases, it's recommend to use controlled components to implement forms.

Related questions

0 votes
asked Jan 31, 2021 in ReactJS by Robindeniel
0 votes
asked Apr 15, 2022 in ReactJS by Robindeniel
...