0

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

4

1 回答 1

0

您必须使用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>

于 2020-02-16T10:13:43.717 回答