Controlled components & non-controlled components

In React, form components can be divided into two categories, controlled and non-controlled components.

I. Controlled components

value <input> A controlled component is set. For controlled <input> , rendered HTML elements always hold value the value of the property. For example:

Render () {    return <input type= "text" value= "Hello"/>}

The above code renders a value Hello! of INPUT element. Any value entered by the user in the rendered element does not work because the React has been assigned a value Hello! . If you want to respond to updating the values entered by the user, you have to use the onChange event:

Constructor (props) {   super (props);    this. State={value: ' Hello '};    this. handlechange=the. Handlechange.bind (this );  }  HandleChange (event) {    this. SetState ({value:event.target.value});  }  Render () {    varthis. State.value;     return <input type= "text" Value={value} onchange={this. handlechange}/>;  }

In the preceding code, React updates the values entered by the user to the <input> properties of the component value . This makes it easy to implement a response or to validate the user-entered interface.

Second, non-controlled components

valuea component that is not set (or set to null ) <input> is a non-controlled component. For non-controlled <input> components, the rendered element directly reflects the user input. For example:

Render () {    return <input type= "text"/>}

The above code renders an input box with a null value, and the user input is immediately reflected on the element. As with controlled elements, use onChange events to listen for changes in values.

If you want to set a non-empty initial value for a component, you can use the defaultValue property. For example:

Render () {    return <input type= "text" defaultvalue= "Default Value" >}

The above code renders an element that has the same initial value as the controlled component, but this value can be changed by the user and will be reflected on the interface. Similarly, radio checkbox supported properties of type, <input> defaultChecked support Properties <select> defaultValue .

render () {      return  (          <div>            <input type= "Radio" name= "opt" defaultchecked/> Option 1            <input type= "Radio" name= "opt"/> option 2            <select defaultvalue= "C" >              <option value= "A" >Apple</option>              <option value= "B" >Banana</option>              <option value= "C" >Cranberry</option>            </select>          </div>      );    }

It is important to note that the default value applies only to the first rendering and will not be applied during the re-render phase.

Third, checkbox and radio

The checkbox and radio are special, and if Preventdefault is called in the OnChange event, the browser does not update the checked state, even if the value of the component is checked or unchecked in fact.

Class HelloWorld extends react.component{    Constructor (props) {        super (props);        This.handlechange=this.handlechange.bind (this);        This.state={checked:true};    }    HandleChange (e) {        e.preventdefault ();        This.setstate ((prevstate) = {            return {checked:!  Prevstate.checked};}        );    Render () {        return (<div>            <input type= "checkbox" checked={this.state.checked} onchange={ This.handlechange}/> Click on my            <br/>{string (this.state.checked)}            </div>) }} Reactdom.render (    

In the example above, although the value of this.state.checked has changed, the checkbox value does not change, there are three ways to solve this problem:

1) Avoid calls to E.preventdefault, such as the above example of the E.preventdefault comment off it can be;

2) handling checked changes in settimeout

HandleChange (e) {      window.settimeout (() = {        this.setstate ((prevstate) = {            return {checked :! prevstate.checked};}        );      },0);    }   

3) using the Click event

Controlled components & non-controlled components