0

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;

1 respuesta 1

0

He hecho este pequeño ejemplo.

import React, { Component } from "react";

export default function App() {
  return (
    <div className="App">
      <CustomSelect />
    </div>
  );
}

class CustomSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      "car": ""
    }

    this.valueChanged = this.valueChanged.bind(this);
  }

  valueChanged(e) {
    if (e.target.name === "car") {
      console.log(e.target.name);
      console.log(e.target.selectedOptions[0].dataset.key);
      return;
    }
  }

  render() {
    return (
      <div>
        <label for="car">Choose a car:</label>

        <select onChange={this.valueChanged} name="car" id="cars">
          <option data-key="-1-data" value="-1">
            ...Select a car ...{" "}
          </option>
          <option data-key="1-data" value="0">
            Volvo
          </option>
          <option data-key="2-data" value="1">
            Saab
          </option>
          <option data-key="3-data" value="2">
            Mercedes
          </option>
        </select>
      </div>
    );
  }
}

Básicamente debes verificar si el nombre del elemento es el que quieres verificar su data-key. De ser así, dentro de un if, extraes el data-key y lo añades a tu estado.

En mi ejemplo solo hago un console.log, pero tu deberías cambiar eso por el correspondiente setState.

Puedes probar el código aquí: https://codesandbox.io/s/rough-worker-9zkjw?file=/src/App.js:470-481

1
  • muchas gracias, me ayudo bastante
    – Invited
    Commented el 31 may. 2021 a las 5:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.