5. Associations between forms and variables

When looking at forms, we need to understand the concept of managed and uncontrolled components.

The React controlled component controls everything inside the component, such as setting the value of the control, and listening for the component change event onChange. React controls cannot be controlled by React. A typical example is the Input Type =file control. Its value is read-only and React controls cannot reset the value.

All need to be retrieved via refs, and the native methods and properties of the DOM are manipulated directly.

5.1 Get and display values through input

Let’s see how we can specify the value of state for input.

5.1.1 Direct Modification

<input onInput={(e)=>{
    this.setState({x:e.value})
}} />
Copy the code

We directly specify an arrow method for the control to change the state value, but this method can be cumbersome in a form. We can modify it in a small proxy way.

5.1.2 Agent Modification


handleUpdateState (event) {
    let id = event.target.id;
    let idArrays = id.split('. ');
    let obj = this.state;
    let NowObj = obj;
    for (var i = 0; i < idArrays.length; i++) {
        if (i < idArrays.length - 1) {
            if(! NowObj[idArrays[i]]) { NowObj[idArrays[i]] = {}; } NowObj = NowObj[idArrays[i]]; }else{ NowObj[idArrays[i]] = event.target.value; }}this.setState(obj);
}

<input id="name" onInput={this.handleUpdateState.bind(this)} / >Copy the code

The method is simple by reading the id on the space and writing the value to the owning node according to the namespace of the ID. This allows us to change all values in one method and specify the level of change on the ID.

5.2 Obtain and display the value through check

state = {
    checked:false
}

handleCheckBox () {
    this.setStat({checked:!this.state.checked})
}

 <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)} / >Copy the code

In general, we use checkboxes in a multi-selection environment. If you need multi-selection in your project, you need to make an array to hold the multi-selection values. So the checkbox is rendered under control.

state = {
    items:[
        {name:'checkbox1'.checked:false},
        {name:'checkbox2'.checked:false},
        {name:'checkbox3'.checked:false}
    ]
}

handleCheckBox () {
    this.setStat({checked:!this.state.checked})
}

this.state.items.map(p= > <input type="checkbox" checked = {this.state.checked} onChange={this.handleCheckBox.bind(this)} / >)Copy the code

5.3 Obtain and display values through radio

Radio is simpler. You can set a value and change the value directly when the radio changes

state = {
   checked:- 1
}

handleCheckBox (val) {
    this.setStat({checked:val})
}

<input type="radio" checked = {this.state.checked==='1'} onChange={this.handleCheckBox.bind(this.1)}/>
<input type="radio" checked = {this.state.checked==='2'} onChange={this.handleCheckBox.bind(this,2)}/>
<input type="radio" checked = {this.state.checked==='3'} onChange={this.handleCheckBox.bind(this,3)}/>
Copy the code

Original: www.yodfz.com/detail/38/5…