Event handling useState over and out form button
Wed Jun 21 2023 14:01:29 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
import React, { useState } from "react";
import FormInput from "./FormInputs";
function Form() {
const [conditionButton, setCondition] = useState(false);
function getStateOver() {
setCondition(true);
}
function getStateOut() {
setCondition(false);
}
return (
<form className="form">
<FormInput type="text" placeholder="Username" />
<FormInput type="password" placeholder="Password" />
<button
type="submit"
style={
conditionButton ? { background: "black" } : { background: "white" }
}
onMouseOver={getStateOver}
onMouseOut={getStateOut}
>
Login
</button>
</form>
);
}
export default Form;
content_copyCOPY
se hace la renderizacion condicional en base al reader de mouseover and mouseout para que active o no el stilo
Comments