Creamos un proyecto de reacción, creamos una carpeta de componentes en src y creamos un index.jsx index.jsx
a continuación. El código de referencia es el siguiente
import React, {
useState } from "react";
const useInputValue = (initialValue) => {
const [value,setValue] = useState(initialValue);
return {
value,
onChange: e => setValue(e.target.value),
clearValue: () => setValue("")
}
}
const TodoForm = ({
onSubnit }) => {
const {
clearValue,...text } = useInputValue("");
function onSubeitHandler(e){
e.preventDefault();
onSubnit(text.value);
clearValue("");
}
return (
<form onSubmit = {
onSubeitHandler }>
<input type="text" {
...text }/>
</form>
)
}
export default TodoForm
En primer lugar, definimos una función useInputValue para declarar elementos de formulario para vincular datos de respuesta a través de un método típico.
Recibir un parámetro para el valor predeterminado de los datos de respuesta y luego exponer su valor. Al mismo tiempo, vincular un onChange onChange
Todos deben ser familiarizado con el evento, que es cuando cambia el contenido del elemento del formulario.
El significado aquí es que cuando se activa onChange para indicar que el contenido del cuadro de entrada u otros elementos del formulario ha cambiado, entonces ejecutamos setValue(e.target. value) y
setValue se declara a través de useInputValue La función utilizada para modificar los datos de respuesta es escribir el contenido modificado del formulario en el contenido de los datos de respuesta a través de setValue.
Este método de escritura es relativamente formal. GitHub usa este método en muchos casos
y luego escribimos un clearValue para la limpieza manual.
Entonces comenzamos a ejecutar
const {
clearValue,...text } = useInputValue("");
Date cuenta de que quiero sacar un clearValue y usarlo por separado, y luego poner el objeto devuelto por todo el método en este texto,
porque la lógica del valor y el evento onChange deben estar juntos, de lo contrario habrá problemas
Luego vinculamos el evento onSubmit al formulario para escuchar su envío porque simplemente presionamos Enter para enviar el contenido del formulario
y luego la lógica del evento vinculado es que onSubeitHandler
primero ingresa el evento y lo ejecutamos primero.
e.preventDefault();
El comportamiento predeterminado del elemento de bloqueo se debe a que el envío del formulario saltará. Necesitamos interceptar su comportamiento. De lo contrario, puede saltar usted mismo sin agregar esto y luego lo ejecutamos
.
onSubnit(text.value);
En primer lugar, en términos de parámetros, el texto se obtiene a través de la declaración useInputValue, y su valor es el valor de los datos de respuesta. Se
llama a OnSubnit.
Este onSubnit lo proporciona el componente principal.
Tal vez no lo entiendas bien. , o podemos escribirlo
en el modo de función para aceptarlo. El primer parámetro de props es props. Para mayor comodidad, { onSubnit }
significa directamente tomar onSubnit en props
y llamar al clearValue recién creado para borrar los datos de respuesta.
Luego escribimos el código App.js bajo src de la siguiente manera
import React,{
useState } from "react"
import Index from "./components/index.jsx"
const Appind = () => {
const [todos,setTodos] = useState([]);
function setValue(text) {
setTodos([{
text },...todos]);
}
return (
<div>
<Index onSubnit={
setValue }/>
<div>
{
todos.map((element,index) => {
return (
<div key={
index}>
{
element.text }
</div>
)
})
}
</div>
</div>
);
};
export default Appind;
Aquí primero importamos el componente de índice que acabamos de escribir y luego llamamos para
declarar todos los datos de respuesta El valor predeterminado es una matriz vacía
y luego declaramos setTodos para modificar los datos de respuesta de todos.
Luego dijimos antes que el componente index.jsx necesita una función onSubnit del componente principal.
Aquí damos
la lógica en setValue para recibir el texto, es decir, el text.value pasado por el componente index,
y lo combinamos con su existente método a través de la matriz ES6. Combine los subíndices
y luego modifique el valor a través de setTodos
Luego escriba un ciclo debajo del componente de índice para generar el contenido de la matriz todos.
Ejecutamos el proyecto
. Ingresamos el contenido en el cuadro de entrada y presionamos Enter. El contenido se fusionará con todos uno por uno a través de onSubnit y se cargará en el siguiente elemento de bucle. Esto es
lógico. Todavía puedes demostrar bien la lógica. Si la entiendes, ganarás más.