Tengo un problema, estoy pasando algunos valores como defaultValues
en un par de inputs
en react, la propiedad value me devuelve uno de los valores, el otro lo pude sacar usando UseRef
, pero el valor se queda estático, y no cambia al seleccionar otro valor de el input select
,
la idea de este componente es que cada vez que yo cambio de moneda usando el input select
, automáticamente, se pasen los valores public_key
y private_key
, solo puedo obtener private
que viene de el value
y el public
, lo intente sacar con el hook useRef()
pero no es dinámico y me lo pasa al estado para todos las opciones,¿Que puedo hacer? gracias.
import { useRef } from "react";
import { useEffect, useState } from "react";
import Blocks from './Blocks'
const Transaction = () => {
const keyvalue = useRef()
const [wallet,setWallet]=useState([])
const [newTransaction, setNewTransaction]=useState({
key:'',
from:'',
to:'',
amount:'',
})
const setData = () => {
let status = keyvalue.current.getAttribute("data-key");
console.log("status", status);
};
useEffect(()=>{
getWallets()
},[])
const handleChange= e=>{
setNewTransaction({
...newTransaction,
[e.target.name]:e.target.value,
})`setData()`
}
const submitTransaction = e=>{
e.preventDefault()
console.log(newTransaction)
}
const cancelTransaction=()=>{
window.location.href='/home'
}
const getWallets = async()=>{
const token = sessionStorage.getItem('token')
const idUser = sessionStorage.getItem('idUser')
const url = 'http://localhost:4000/wallets/walletslist/'+idUser
const myHeaders ={
method: 'GET',
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json',
mode:'cors',
autorization:token
},
}
const request=await fetch(url,myHeaders)
const response = await request.json()
setWallet(response)
}
return (
<div>
<form onSubmit={submitTransaction}>
<div>
<select name='key' onChange={handleChange}>
<option value="error">--select wallet--</option>
{wallet.map(wallet=>(
<option key={wallet._id} ref={keyvalue} data-key={wallet.public_key} value={wallet.private_key}>{wallet.name}</option>
))}
</select>
<label>your sign address wallet</label>
<input type="text" style={{width:'500px'}} name='key' defaultValue={newTransaction.key} />
<label>your address wallet</label>
<input type="text" style={{width:'940px'}} name="from" defaultValue={newTransaction.from} />
<label>to address</label>
<input type="text" name='to' required />
<label>amount</label>
<input type="number" name="amount" onChange={handleChange} required />
</div>
<div>
<input type="submit" value="send transaction" required />
</div>
<div>
<button type='button' onClick={cancelTransaction}>cancel</button>
</div>
</form>
<div>
<Blocks/>
</div>
</div>
);
}
export default Transaction;