我的问题是我想设置值 我在选择视图的表角色(admin和users)中拥有的,以及当选择某个值时,通过控制台获取该值
import {
useState
} from "react";
import {
useNavigate
} from "react-router-dom";
import axios from 'axios';
const Register = (props) => {
let history = useNavigate();
//guardamos los valores de registro del usuario nuevo
const [data, setData] = useState({
nombreUsuario: "",
apellidosUsuario: "",
roles: "",
emailUsuario: "",
passwordUsuario: ""
})
const handleChange = (e) => {
setData({ ...data,
[e.target.name]: e.target.value
});
console.log(data)
}
const submitForm = (e) => {
e.preventDefault();
const sendData = {
nombreUsuario: data.nombreUsuario,
apellidosUsuario: data.apellidosUsuario,
roles: data.roles.value,
emailUsuario: data.emailUsuario,
passwordUsuario: data.passwordUsuario
}
console.log(sendData);
// axios.post('http://localhost/Repositorio/DEW/practicas_react/backend/index.php', sendData)
// .then(response => {
// //hacemos una condicion para saber si el usuario es correcto o no es correcto
// response.data.Status === 'Invalid' ? alert("Usuario Invalido") : history('/Login');
// })
}
return ( <
div className = "mx-auto w-50" >
<
form data - bitwarden - watching = "1"
onSubmit = {
submitForm
} >
<
img className = "mb-4"
src = "/docs/5.2/assets/brand/bootstrap-logo.svg"
alt = "imagen de registro"
width = "72"
height = "57" / >
<
div className = "d-flex gap-2 justify-content-between bg-primary rounded-1 py-2 px-2" >
<
h1 className = "h3 mb-3 fw-normal text-center text-white" > Registrar usuario nuevo < /h1> <
svg xmlns = "http://www.w3.org/2000/svg"
width = "40"
height = "40"
fill = "white"
className = "bi bi-person-add "
viewBox = "0 0 16 16" >
<
path d = "M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" / >
<
path d = "M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" / >
<
/svg> < /
div > <
div className = "form-floating my-2" >
<
input type = "text"
name = "nombreUsuario"
className = "form-control"
onChange = {
handleChange
}
value = {
data.nombreUsuario
}
/> <
label
for = "floatingInput" > Nombre < /label> < /
div >
<
div className = "form-floating my-2" >
<
input type = "text"
name = "apellidosUsuario"
className = "form-control"
onChange = {
handleChange
}
value = {
data.apellidosUsuario
}
/> <
label
for = "floatingInput" > Apellidos < /label> < /
div >
<
div className = "form-group" >
<
label className = "mb-2" >
<
svg xmlns = "http://www.w3.org/2000/svg"
width = "20"
height = "20"
fill = "currentColor"
className = "bi bi-person-gear me-2"
viewBox = "0 0 16 16" >
<
path d = "M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" / >
<
/svg>
Rol del usuario < /label> <
select name = "roles"
className = "form-select" >
<
option selected > Opcion de rol de usuario < /option> <
option value = "1" > One < /option> < /
select > <
/div>
<
div className = "form-floating my-2" >
<
input type = "email"
name = "emailUsuario"
className = "form-control"
onChange = {
handleChange
}
value = {
data.emailUsuario
}
/> <
label
for = "floatingInput" > Email < /label> < /
div >
<
div className = "form-floating my-2" >
<
input type = "password"
name = "passwordUsuario"
className = "form-control"
onChange = {
handleChange
}
value = {
data.passwordUsuario
}
/> <
label
for = "floatingPassword" > Contraseña < /label> < /
div > <
button className = "w-100 btn btn-lg btn-primary"
type = "submit" > Registrar usuario < /button> < /
form > <
/div>
)
}
export default Register;
正如我所看到的,所选值未显示,我如何显示它?
我得到的值 输入,但选择显示为空
values of input
1条答案
按热度按时间kwvwclae1#
我猜这是因为您向组件传递了 prop
但您永远不会最终使用这些 prop ,我假设这些 prop 包含您希望在更新时显示的值。