Estoy en el proceso de aprender React JS, mientras sigo un tutorial en línea, el siguiente código dejó de funcionar y me dio la excepción "TypeError: No se puede leer la propiedad 'PreventDefault' de undefined". ¿Puede alguien ayudarme a entender qué hay aquí? gracias por adelantado.

const Card = (props)=>{
  return(
		<div style={{margin:'1em'}}>
		  <img width ="75" src ={props.avatar_url}/>
      <div style={{display: 'inline-block', marginLeft: 10}}>
        <div style ={{fontSize:'1.25em', fontWeight: 'bold'}}>
        	{props.name}
        </div>
        <div>{props.company}</div>
      </div>
		</div>
  );
};

const CardList = (props) => {
	return (
  <div>
  	{props.cards.map(card => <Card {...card} />)}
  </div>
  );
}

class Form extends React.Component {

  handleSubmit = (e) => {
  		e.PreventDefault();
      console.log('Event: Form Submit');
  };

  render() {
		return (
    	<form onSubmit={this.handleSubmit()}>
        <input type ="text" placeholder ="Github username"/>
        <button type ="submit">Add Card</button>
      </form>
    );
  }
}

class App extends React.Component {

state = {
	cards:  [
        {		name : "Paul O’Shannessy" , avatar_url: "https://avatars1.githubusercontent.com/u/8445?v=4", company: "Facebook"  },
        {		name : "Ben Alpert" , avatar_url: "https://avatars1.githubusercontent.com/u/6820?v=4",company: "Facebook"  },
      ]
}

  render() {
		return(
    		<div>
    		  <Form />
          <CardList cards={this.state.cards} />
    		</div>
    	);
  }
}

ReactDOM.render(<App />,mountNode)
1
user2066540 13 sep. 2018 a las 23:53

3 respuestas

La mejor respuesta

Dos pequeños problemas aquí. Primero, no es PreventDefault, es preventDefault. Entonces aquí:

<form onSubmit={this.handleSubmit()}>

No estás utilizando una función de devolución de llamada, estás invocando la función real. Si no utiliza una devolución de llamada, no puede obtener el e. Además, si lo usa como anteriormente, se dispara en el primer render pero nunca se dispara nuevamente con un envío.

<form onSubmit={() => this.handleSubmit()}>

Pero, no es necesario y no debe usarlo así. Si lo usa así, la función de devolución de llamada se recreará en cada render. Solo usa la referencia de la función. También puedes obtener e con esto.

<form onSubmit={this.handleSubmit}>

Una última cosa, use un key para el mapa de su Card.

{props.cards.map( card => <Card key={card.name} {...card} /> )}

Oh, tal vez una última cosa :) Use un linter si no lo usa actualmente.

4
devserkan 13 sep. 2018 a las 21:03

Intentaste simple como esta:

 <form onSubmit={e => {e.preventDefault();}} >

Espero que eso ayude

0
StefaDesign 26 jun. 2019 a las 16:56

Debe adjuntar solo el objeto de función a los accesorios onSubmit, SIN NECESIDAD para llamarlo como lo hizo onSubmit={this.handleSubmit()}. Debería ser onSubmit={this.handleSubmit}

Además, se llama preventDefault, no PreventDefault.

const Card = (props) => {
  return (
    <div style={{ margin: '1em' }}>
      <img width="75" src={props.avatar_url} />
      <div style={{ display: 'inline-block', marginLeft: 10 }}>
        <div style={{ fontSize: '1.25em', fontWeight: 'bold' }}>
          {props.name}
        </div>
        <div>{props.company}</div>
      </div>
    </div>
  );
};

const CardList = (props) => {
  return (
    <div>
      {props.cards.map(card => <Card {...card} />)}
    </div>
  );
}

class Form extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();
    console.log('Event: Form Submit');
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Github username" />
        <button type="submit">Add Card</button>
      </form>
    );
  }
}

class App extends React.Component {

  state = {
    cards: [
      { name: "Paul O’Shannessy", avatar_url: "https://avatars1.githubusercontent.com/u/8445?v=4", company: "Facebook" },
      { name: "Ben Alpert", avatar_url: "https://avatars1.githubusercontent.com/u/6820?v=4", company: "Facebook" },
    ]
  }

  render() {
    return (
      <div>
        <Form />
        <CardList cards={this.state.cards} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id='root'></div>
3
Arup Rakshit 13 sep. 2018 a las 20:56