ReactJS 表单提交 preventdefault 不起作用

IT技术 javascript reactjs
2021-04-30 23:04:35

我正在学习 React JS，同时学习在线教程。下面的代码停止工作并给我一个异常“TypeError：无法读取未定义的属性'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>
        );
  }
}

ReactDOM.render(<App />,mountNode)

4个回答

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

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

您不是在使用回调函数，而是在调用真正的函数。如果不使用回调，则无法获得e. 此外，如果你像上面那样使用它，它会在第一次渲染时触发，但不会在提交时再次触发。

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

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

<form onSubmit={this.handleSubmit}>

最后一件事，使用 akey作为您Card的地图。

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

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

你只是需要函数对象附加到onSubmitprops，没有需要调用它像你一样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>

你有没有尝试过像这样简单： 

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

我希望有帮助

就我而言，我的表单组件在另一个组件中（我没有注意到这一点，因为父表单也在父组件中）。因此，当按下提交按钮时，它会影响到父按钮。

总之，只需添加e.preventDefault()父级，或删除表单父级。

其它你可能感兴趣的问题
上一篇找不到module：无法解析“child_process” - google-spreadsheet 下一篇React 图像在本地加载，但不在 AWS Amplify 上加载