Este artículo es una nota de estudio que escribí cuando estaba aprendiendo React, la grabaré y la compartiré aquí. Este es el octavo artículo, que presenta principalmente componentes no controlados y componentes controlados.
Tabla de contenido
1.1 Caso de envío de formulario
2.1 Caso de componente controlado
2.1 Resumen de casos controlados
1. Componentes no controlados
1.1 Caso de envío de formulario
Primero escribimos un formulario con un nombre de usuario y contraseña, cuando hacemos clic en iniciar sesión, aparecerá una ventana emergente que muestra el nombre de usuario y la contraseña que ingresamos.
1. Cree la clase Login y escriba la estructura dom en la función de renderizado. Hay dos cuadros de entrada y un botón en el formulario.
2. Configure la dirección de envío y el evento de envío onSubmit para la etiqueta del formulario. Establezca la referencia para el cuadro de entrada.
3. Escriba el evento de envío handleSubmit de from en la instancia.
class Login extends React.Component {
handleSubmit = ()=>{
const {username, password} = this
alert(`您输入的用户名是，${username.value},输入的密码是${password.value}`)
}
render() {
return (
<form action="http://www.atguigu.com" onSubmit = {this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username" />
密码：<input ref={c => this.password = c} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('test1'))Después de escribir el código, veamos el efecto: hacer clic en el botón de inicio de sesión puede mostrar la información en la ventana emergente normalmente.
Después de hacer clic en el botón Aceptar en la ventana emergente, la página salta a la dirección que escribimos y el nombre de usuario y la contraseña se unen al final de la dirección URL.
De esta forma se implementan las funciones, pero ¿y si no queremos que la página salte? Por ejemplo, utilizando la tecnología ajax, la página puede obtener datos sin actualizarse. Las páginas web actuales dan gran importancia a la experiencia del usuario. No queremos que la página se actualice o salte con frecuencia al hacer clic en la página. Por lo tanto, en nuestro caso, encontraremos una manera de eliminar los saltos de página.
Después de obtener el nombre de usuario y la contraseña, haga clic en Aceptar, lo que activará el evento predeterminado del formulario y saltará a la página donde está configurado el atributo de acción. Este es el evento predeterminado del formulario. Incluso eliminar el atributo de acción no puede evitar este evento predeterminado. Entonces tenemos que usar preventDefault para reescribir el evento de envío del formulario.
El código es el siguiente: Pasamos un evento de parámetro a la función de evento, debido a que la fuente del evento es el formulario, el evento de parámetro es el formulario. Dentro de la función, usamos directamente event.preventDefault() para evitar el evento predeterminado y evitar saltos de página.
handleSubmit = (event) => {
event.preventDefault()
const { username, password } = this
alert(`您输入的用户名是${username.value},输入的密码是${password.value}`)
}1.2 Resumen del caso
Combinado con el caso anterior, se ha escrito un componente no controlado.
En el formulario, ingrese el DOM de la clase (cuadro de entrada, selección de radio, selección múltiple, etc.) Si está disponible para uso inmediato , es un componente no controlado. Por ejemplo, en este caso hay un formulario. Hay dos cuadros de entrada en el formulario. Primero configure el identificador de referencia. Solo cuando la función de evento se activa al hacer clic en el botón de inicio de sesión, se obtienen los valores en los dos cuadros de entrada. basado en la referencia.
2. Componentes controlados
2.1 Caso de componente controlado
Intentemos reescribir el ejemplo anterior y convertirlo en un componente controlado.
1. Primero, eliminamos la referencia, no configuramos la referencia para los dos cuadros de entrada y usamos el evento onchange. El evento onchange se activará siempre que el contenido del cuadro de entrada cambie y el contenido del cuadro de entrada pueda ser monitoreado en tiempo real. Tenga en cuenta que reaccionar debe escribirse como onChange.
2. Luego, escribimos la función de evento, el parámetro es evento, que es la fuente del evento: este cuadro de entrada. Almacenamos directamente el contenido del cuadro de entrada (event.target.value) en el estado utilizando la API setState.
3. Debido a que se utiliza el estado, no olvide inicializar el estado al principio.
De esta manera, hemos completado la reescritura del caso. Mientras el valor del cuadro de entrada cambie, el nuevo valor se almacenará en el estado, asegurando que el valor en el estado esté vinculado al cuadro de entrada y se actualice en tiempo real. Esto ya no es un sistema de pago por uso.
El código se muestra a continuación:
class Login extends React.Component {
//状态初始化
state = {
username:'',//用户名
password:''//密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交的回调
handleSubmit = (event) => {
event.preventDefault()
const {username,password} = this.state
alert(`您输入的用户名是${username},输入的密码是${password}`)
}
render() {
return (
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名：<input onChange = {this.saveUsername} type="text" name="username" />
密码：<input onChange = {this.savePassword} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('test1'))El efecto es el siguiente: véalo en las herramientas oficiales para desarrolladores de React.
2.1 Resumen de casos controlados
Este es un componente controlado. Un DOM de tipo de entrada de este tipo, como un cuadro de entrada, puede mantener los datos en el estado en tiempo real a medida que los ingresa el usuario. Cuando lo usa, puede obtenerlos directamente del estado. Este es un componente controlado.
Amigos que han entrado en contacto con Vue, este componente controlado es muy similar al enlace de datos bidireccional en Vue, v-model, pero el enlace de datos bidireccional no está implementado en React, por lo que aquí se debe usar onchange.
No hay necesidad de referencia en los componentes controlados, lo que está en línea con los requisitos del sitio web oficial de React para que los desarrolladores usen menos referencias, por lo que es mejor usar componentes controlados. Cada DOM de clase de entrada de un componente no controlado debe agregarse con una etiqueta de referencia, lo cual es un poco problemático, pero no hace daño.