Use forms in React

  • A controlled form

React manages the values of form elements. The values of forms are stored in state, so the values of form elements need to be retrieved from state

  • Uncontrolled form

Form element data is managed by itself, and the value of the form element is stored in the DOM, which needs to be manipulated when retrieved

Controlled form value binding and data synchronization

One-way data binding

import React,{Component} from 'react'

class App extend Component {
    state = {
        name: 'Ming'
    }
    render() {
        return (
          <input value={this.state.name}  />)}}Copy the code

Bind the data inside the state to the input for display. However, when changing the value inside the input box, it is found that the internal value cannot be changed. Therefore, a method needs to be set to change the data inside the state to achieve data synchronization

OnChange method to achieve two-way data binding

  • When you set up the onChange method, the method needs to receive an event objecteFind the value of the current element through the event objectTwo-way data binding
state = {
   name: 'Ming'
}
handler = (ev) = > {
    this.setState({
        name:ev.target.value 
    })
}
render() {
   return (
     <input value={this.state.name} onChange={this.handler} />)}Copy the code
  • Multiple attribute input boxes, realize a method to process multiple input boxes, by setting the name attribute to the input box, the name attribute is recommended to be the same as the attribute name in state.
  1. The purpose of using ** [] ** is that if the current attribute name is dynamic, wrapping with [] will automatically calculate. Find the value of the operation
handler = (ev) = > {
    // Receive the name value and store it
    const prop = ev.target.name
    this.setState({
        [prop]: ev.target.value
    })
}
Copy the code
  1. Method two is by operating on elements
<input 
    value={this.state.name}
    onChange={(ev) = > {this.setState({name:ev.target.value})} } 
/>
Copy the code

Details: Console error handling

If you bind a value attribute to a form element, you must also bind readOnly to the form element or provide an onChange event:

  • If the binding is readOnly, the element is read-only and cannot be modified. At this point, no warning will pop up on the console.
  • Binding onChange means that the value of this element can be changed, but you need to define the logic for the change.
  • You can also change value todefaultValue, you don’t want to set events, but you want to show data.
<input  defaultValue={this.state.name} />
Copy the code

The drop-down form

class App extends Component {
  state = {
    name: 'yellow'
  }
  handole = (ev) = > {
    this.setState({
      name: ev.target.value
    },() = >{
      console.log(this.state.name);
    })
    
  }
  render () {
    return (
      <>
        <select value={this.state.name} onChange={this.handole}>
          <option value="Little red">The little red</option>
          <option value="Little blue">Small blue</option>
          <option value="Yellow">Huang,</option>
        </select>
      </>)}}Copy the code

Radio buttons

class App extends Component {
  state = {
    sex: 'male'
  }
  render () {
    return (
      <>
        <input type="radio"
          name="sex"
          value="Male"
          defaultChecked={this.state.sex= = ='male'}
          onChange={(ev)= >{this. SetState ({value} sex: ev. Target., () = > {the console. The log (this) state) sex)})}} / > male<input
          type="radio"
          name="sex" 
          value="Female"
          defaultChecked={this.state.sex= = ='woman'}
          onChange={(ev)= >{this. SetState ({value} sex: ev. Target., () = > {the console. The log (this) state) sex)})}} / > female</>)}}Copy the code
  • Set up thedefaultCheckedChecks if currently selected and receivesBoolean value

Check box

import React, { Component } from 'react'

class App extends Component {
  state = {
    name: 'Ming'.age: 18
  }
  student = [
    {
      id: 0.name: 'vue'.isChecked: true
    },
    {
      id: 2.name: 'react'.isChecked: false
    },
    {
      id: 3.name: 'angle'.isChecked: false}]// Change the checkbox state function
  handler = (index, e) = > {
    this.student[index].isChecked = e.target.checked
  }
  // Submit data
  submit = (ev) = > {
    // Cancel the default commit
    ev.preventDefault();
    // Click the submit button to retrieve the desired data and store it using variables
    let prop = this.student.filter(item= > item.isChecked).map(item= > item.id)
    // Save the current checkbox data with other form data
    // Step 6: Merge the extracted data with the internal data of the previous state, and return the final processing result to the server for useprop = { ... this.state,prop }console.log(prop);
  }
  render() {
    return (
      // Step 4: Listen on the commit and get the data you want
      <form onSubmit={this.submit.bind(this)}>This.student.map ((item, index) => {return () {this.student.map((item, index));<label key={item.id}>
                <input type="checkbox"// Step 2, bind the checkbox selected state to fake datadefaultChecked={item.isChecked}// Step 3: When operating, update will also be synchronizedonChange={(e)= > { this.handler(index, e) }}
                />{item.name}
              </label>)})}<br />
        <input type="submit" />
      </form>)}}export default App

Copy the code