Quiero usar jquery en reaccionar. Tengo un campo de entrada en mi proyecto. Estoy creando un evento de coincidencia con 'this.state.value' en mi campo de entrada. En este control, mis bordes de entrada tienen bordes verdes si coinciden y bordes rojos si no coinciden. Quiero que el borde permanezca con color permanente si no hay coincidencia. Cómo puedo hacerlo ?
<input className={this.state.value1 != this.state.value1.match(/^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/) ? "redBorder inputInfo" : "greenBorder inputInfo"} name="value1" type="text" placeholder="Name" value1={this.state.value1} onChange={this.handleChange} />Esto es css:
input[type=text].redBorder:focus{ border: 3px solid red; }Puede usar una variable de estado para verificar si la entrada es válida y cambiar el nombre de clase en consecuencia. Aquí hay una caja de códigos de trabajo
estilos :
.App { font-family: sans-serif; text-align: center; } input[type="text"] { border: 1px solid black; } input[type="text"].redBorder { border: 1px solid red; } input[type="text"].greenBorder { border: 1px solid green; } input[type="text"]:focus { outline: none; }Entrada de manejo :
import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [inputIsValid, setInputIsValid] = useState(null); const [inputValue, setInputValue] = useState(""); useEffect(() => { if (inputValue.length > 0) { if (inputValue.match(/^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/)) setInputIsValid(true); else setInputIsValid(false); } else setInputIsValid(null); }, [inputValue]); const handleValueChange = (e) => setInputValue(e.target.value); return ( <div className="App"> <input type="text" className={ inputIsValid === null ? "" : inputIsValid ? "greenBorder" : "redBorder" } value={inputValue} onChange={handleValueChange} /> </div> ); }Esta es mi solución. Puedes probarlo en mi codesandbox .
import "./styles.css"; import React, { useState } from "react"; export default function App() { let [borderClass, setBorderClass] = useState(""); let pattern = /^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/; let handleChange = (e) => { if (e.target.value === "") { setBorderClass(""); } else { if (e.target.value.match(pattern)) { setBorderClass("greenborder"); } else { setBorderClass("redborder"); } } }; return ( <div className="App"> <input type="text" className={borderClass} onKeyUp={handleChange} /> </div> ); } .App { font-family: sans-serif; text-align: center; } input[type="text"]:focus { outline: none; } .greenborder { border: 1px solid green; } .redborder { border: 1px solid red; }