Question

我正在学习React JS，而当我按照在线教程学习时，以下代码停止工作，并给我异常“ TypeError：无法读取未定义的属性'PreventDefault'”。有人可以帮我了解这里的wron吗？预先感谢。

compile

Answer 1

您只需要将函数对象附加到onSubmit道具上，不需要就可以像调用onSubmit={this.handleSubmit()}一样对其进行调用。应该是onSubmit={this.handleSubmit}

也称为preventDefault，而不是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>

Answer 2

这里有两个小问题。第一个不是PreventDefault，而是preventDefault。然后在这里：

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

您不是在使用回调函数，而是在调用实函数。如果不使用回调，则无法获得e。另外，如果您像上面一样使用它，它将在第一个渲染中触发，但再也不会在提交时触发。

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

但是，您不需要也不应该这样使用它。如果像这样使用它，则回调函数将在每个渲染器中重新创建。只需使用函数的引用即可。您也可以获得e。

<form onSubmit={this.handleSubmit}>

最后一件事，在key的地图上使用Card。

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

哦，也许还有最后一件事:)如果您目前不使用棉绒，请使用它。

Answer 3

您尝试这样简单吗：

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

我希望对您有帮助

ReactJS表单提交preventdefault不起作用

3 个答案: