为什么当我尝试使用 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 工作，如果我直接在表单中调用它，我可以让函数工作，但我不能让它们一起工作。

Answer 1

您必须bind “onChangeTest”方法。 目前onChangeTest的this指的是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>