javascript - 当我尝试使用 props 传递的函数时，为什么 preventDefault 停止工作？

Question

我有一个带有表单的组件，当我使用这行代码时，props 传递的函数起作用。

<form onSubmit={this.props.onCreateNewItem.bind(this)}>

如果我尝试在将运行 onCreateNewItem 的渲染之前创建另一个函数，它将停止工作。

<form action="" onSubmit={this.onChangeTest}>

onChangeTest(event){
    event.preventDefault();
    this.props.onCreateNewItem();
  } 

如果我在不尝试调用函数的情况下运行代码，则 preventDefault 有效。如果我尝试运行该函数，我会收到此错误：“TypeError：无法读取未定义的属性‘preventDefault’。” 我试图绑定它，然后 preventDefault 工作，但它不运行该功能。

this.props.onCreateNewItem.bind(this);

我很困惑，因为我可以在不调用函数的情况下让 preventDefault 工作，如果我直接在表单中调用它，我可以让函数工作，但我不能让它们一起工作。

标签： javascriptreactjspreventdefault

Answer 1

您必须使用bind“onChangeTest”方法。目前this里面onChangeTest指的是form对象而不是 React 组件。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onChangeTest = this.onChangeTest.bind(this);
  }

  onChangeTest(event){
    event.preventDefault();
    this.props.onCreateNewItem();
  }

  render() {
   return (
    <form action="" onSubmit={this.onChangeTest}>
      <button type="submit">Submit</button>
    </form>
   );
  }
}

///
function onCreateNewItem() {
    console.log("onCreateNewItem called")
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App onCreateNewItem={onCreateNewItem} />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>