The fourth bullet of React entry - data binding and form processing

foreword

The last article talked about stateful components and event processing in react. Today, I will give you a small project - form submission, which will involve many new knowledge points. Let's learn together~

form element

Form elements like <input>、<textarea>、<option>this are different from other elements because they can change through user interaction. The interface provided by these elements makes it easier to process form data in response to user interaction.

• Interaction property, when the user interacts with the following elements, the onChange callback function is used to monitor component changes. Form elements support several properties that are affected by user interaction:
  • value is used for<input>、<textarea>
  • checked for<checkbox>、<radio>
  • selected for<option>

Restricted and Unrestricted Components

• Restricted component
  The value set <input>is a restricted component. For restricted <input>, the rendered HTML element always maintains the value of the value attribute. At this time, the user enters any value in the rendered component and it will not work.

  return <input type='text' value='hello' />
  
  return <textarea name="description" value="demo" />
  

• Unrestricted Component A component that
  has no value set (or set to null) <input>is an unrestricted component. For unrestricted <input>components, the rendered elements directly reflect user input.

  return <input type='text' />
  

  The above is an empty value input box. If you want to set a non-empty initial value, you can use the defaultValue property.

  return <input type="text" defaultValue="Hello" />
  

  The element rendered by the above code has an initial value like the restricted component, but this value can be changed by the user and will be reflected in the interface.
  The type supports radio、checkedthe inputdefaultChecked property and <select>supports the defaultValue property.

  <input type='radio' name='sex' defaultChecked />1
  <input type='radio' name='sex' />2
  <select defaultValue="C">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  

  <select>The selected attribute is usually used in HTML to <option>set the selected state; React uses value instead for more convenient control of components. If it is an unrestricted component, defaultValue is used.
  If you pass an array to the value property, you can select multiple options:<select multiple={true} value={['B', 'C']}></select>

Common form data binding

Through the above learning, we have been able to master the binding of commonly used form data, and the next thing to deal with is the event method encapsulation of two-way data binding in the form.
Through the existing knowledge points, we know that if we want to perform two-way data binding on form data, we need to set the corresponding event function:

handleClick = (e) => {
    
    
  this.setState({
    
    name: e.target.value})
}

However, it is impossible for only one data in our form to need two-way data binding, so the best way is definitely to reuse this function. When we encapsulate this function, we need to consider that we pass the dynamic name value. To set it up, so we need to encapsulate the function like this:

handleChange = (e) => {
    
    
  // 这里要注意我们一定要用[]进行包裹,因为这里我们拿到的name是一个字符串
  let name = e.target.name
  // this.setState({ [name]: e.target.value })
  this.setState({
    
     [e.target.name]: e.target.value })
}

Registration function implementation

In the registration function, we need to consider two-way data binding and verification. Therefore, when implementing the registration function, we also need to integrate our regular matching verification function and error message on the original two-way data binding function. Something like this:

// 姓名校验处理
nameChange = (e) => {
    
    
  let rule = /^[a-zA-Z0-9_-]{4,10}$/
  let value = e.target.value
  let error = ''
  if(!value) {
    
    
    error = '请输入昵称'
  } else if (!rule.test(value)) {
    
    
    error = '请输入4-10位昵称'
  } else {
    
    
    error = ''
  }
  this.setState({
    
    
    name: value,
    nameError: error
  })
}

<label>昵称：
  <input type="text" name="name" 
  value={
    
    name} onChange={
    
    this.nameChange}/>
  <span className="danger">{
    
    nameError}</span>
</label>

In this way, we can realize the verification of the nickname, but there are still many verifications in the form, such as passwords, mobile phone numbers, etc., how can we do this? The next article will take you to solve this problem