0

esoty haciendo un formulario en react pero el boton de es formulario tiene que llevar un evento que al seleccionarlo haga una peticion http pero me marca error: adjunto codigo:

```import '../css/boton.css';
   import React from 'react';
   import Base64 from 'Base64';

  class Boton extends React.Component{

handleClcik(){
    
    console.log('clicked')
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }
    
      componentDidMount() {
        fetch("")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }
}
render(){
    return(
        <button type='submit' onClick={this.handleClcik} className='continuar'>continuar</button> 
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item.id}>
                  {item.name} {item.price}
                </li>
              ))}
            </ul>
          );
        }
    )
}

} export default Boton```

el boton tiene que llevar un evento que reconozca los clicks y aparte que imprima la respuesta del servidor pero no se porque me marca error Adjunto imagen del error: introducir la descripción de la imagen aquí

1 respuesta 1

0

Los componentes de clases no son así. Te sobra la linea handleClick();

import '../css/boton.css';
import React from 'react';
import Base64 from 'Base64';

class Boton extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
    this.handleClick = this.handleClick.bind(this);
  }


 handleClick(){
    //lo que quieras que haga la función handleclick
 }

  componentDidMount() {
    fetch("")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

render(){
const { error, isLoaded, items } = this.state;
return(
    <>
    <button type='submit' onClick={this.handleClcik} 
         className='continuar'>continuar</button> 

{error
  ? <div>Error: {error.message}</div>
  : !isLoaded 
        ? <div>Loading...</div>
        : <ul>
             {items.map(item => {
                 return <li key={item.id}>
                  {item.name} {item.price}
                 </li>
             })}
         </ul>}
    </>
 )
}
}
5
  • entonces el handle click no va o ahi iria lo que quiero que imprima el servidor
    – user289615
    el 7 jun. 2022 a las 23:30
  • es que no se bien lo que quieres que haga, pero intuyo que lo que está dentro de la función componentdidmount es lo que quieres que haga al hacer click. Si es así, deberías de poner ese código dentro de la función handleclick y eliminar el componentdidmount. En el componentdidmount va lo que quieras que haga al montarse el componente
    – Suso
    el 7 jun. 2022 a las 23:40
  • pues voy a poner una url que saque de postman y el resultado de esta url es que genere un token como respuesta mas aparte mande el mensaje 200 como siempre pero para que la peticion funcione necesita una validacion de base64 y todo pero no se como ponerlo
    – user289615
    el 7 jun. 2022 a las 23:56
  • Creo que eso ya es otra cosa distinta. Deberías formular otra pregunta
    – Suso
    el 7 jun. 2022 a las 23:58
  • vale pero gracias por lo otro ya no tengo error
    – user289615
    el 7 jun. 2022 a las 23:59

Tu Respuesta

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