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

【问题标题】：Why does preventDefault stop working when I try to use a function passed by props?当我尝试使用 props 传递的函数时，为什么 preventDefault 停止工作？
【发布时间】：2020-02-16 09:14:32
【问题描述】：

我有一个带有表单的组件，当我使用这行代码时，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 工作，如果我直接在表单中调用它，我可以让函数工作，但我不能让它们一起工作。

【问题讨论】：

你能分享你的整个组件代码吗？也许是一个 jsfiddle。
如果没有从这些组件中看到更多代码，很难说出发生了什么，但听起来作为 onCreateNewItem 属性传递的函数在其参数上调用 preventDefault，期望它是一个事件目的。在这种情况下，用this.props.onCreateNewItem(event) 替换this.props.onCreateNewItem() 至少应该消除显示的错误。
顺便说一句，我对此表示怀疑：<form onSubmit={this.props.onCreateNewItem.bind(this)}> - 也就是将函数 prop 绑定到子组件自己的 this。也许它有效，但它可能完全没有必要（如果它根本不使用this） - 这样做感觉像是一种反模式，所以我有兴趣查看代码，特别是你传递的内容道具。
@RobinZigmond 你是对的！非常感谢！

标签： javascript reactjs preventdefault

【解决方案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>

【讨论】：