La cuarta viñeta de la entrada de React: enlace de datos y procesamiento de formularios

prefacio

El último artículo habló sobre los componentes con estado y el procesamiento de eventos en reaccionar. Hoy, les daré un pequeño proyecto: el envío de formularios, que involucrará muchos puntos de conocimiento nuevos. Aprendamos juntos ~

elemento de formulario

Los elementos de formulario como <input>、<textarea>、<option>este son diferentes de otros elementos porque pueden cambiar a través de la interacción del usuario. La interfaz proporcionada por estos elementos facilita el procesamiento de los datos del formulario en respuesta a la interacción del usuario.

• Propiedad de interacción, cuando el usuario interactúa con los siguientes elementos, la función de devolución de llamada onChange se usa para monitorear los cambios de componentes. Los elementos de formulario admiten varias propiedades que se ven afectadas por la interacción del usuario:
  • el valor se usa para<input>、<textarea>
  • verificado para<checkbox>、<radio>
  • seleccionado para<option>

Componentes restringidos y no restringidos

• Componente restringido
  El conjunto de valores <input>es un componente restringido. Para restringido <input>, el elemento HTML representado siempre mantiene el valor del atributo de valor. En este momento, el usuario ingresa cualquier valor en el componente representado y no funcionará.

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

• Componente sin restricciones Un componente que
  no tiene un valor establecido (o establecido en un valor nulo) <input>es un componente sin restricciones. Para <input>los componentes sin restricciones, los elementos representados reflejan directamente la entrada del usuario.

  return <input type='text' />
  

  Lo anterior es un cuadro de entrada de valor vacío. Si desea establecer un valor inicial no vacío, puede usar la propiedad defaultValue.

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

  El elemento representado por el código anterior tiene un valor inicial como el componente restringido, pero el usuario puede cambiar este valor y se reflejará en la interfaz.
  El tipo admite radio、checkedla inputpropiedad defaultChecked y <select>admite la propiedad defaultValue.

  <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>El atributo seleccionado generalmente se usa en HTML para <option>establecer el estado seleccionado; React usa el valor en su lugar para un control más conveniente de los componentes. Si es un componente sin restricciones, se usa el valor predeterminado.
  Si pasa una matriz a la propiedad de valor, puede seleccionar varias opciones:<select multiple={true} value={['B', 'C']}></select>

Enlace de datos de formulario común

A través del aprendizaje anterior, hemos podido dominar el enlace de los datos de formulario de uso común, y el siguiente paso es la encapsulación del método de evento del enlace de datos bidireccional en el formulario.
A través de los puntos de conocimiento existentes, sabemos que si queremos realizar un enlace de datos bidireccional en los datos del formulario, debemos establecer la función de evento correspondiente:

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

Sin embargo, es imposible que solo un dato en nuestro formulario necesite un enlace de datos bidireccional, por lo que la mejor manera es definitivamente reutilizar esta función.Cuando encapsulamos esta función, debemos considerar que pasamos el valor del nombre dinámico. configúrelo, por lo que debemos encapsular la función de esta manera:

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

Implementación de la función de registro

En la función de registro, debemos considerar el enlace y la verificación de datos bidireccionales. Por lo tanto, al implementar la función de registro, también debemos integrar nuestra función de verificación de coincidencia regular y el mensaje de error en la función de enlace de datos bidireccional original. Algo como esto:

// 姓名校验处理
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>

De esta forma, podemos realizar la verificación del nickname, pero aún quedan muchas verificaciones en el formulario, como contraseñas, números de teléfonos móviles, etc., ¿cómo podemos hacer esto? El siguiente artículo te llevará a solucionar este problema.