Почему предотвращение дефолта перестает работать, когда я пытаюсь использовать функцию, переданную реквизитом? - PullRequest
Новая
       28

Почему предотвращение дефолта перестает работать, когда я пытаюсь использовать функцию, переданную реквизитом?

0 голосов
/ 16 февраля 2020

У меня есть компонент с формой, и когда я использую эту строку кода, функция, переданная props работает.

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

Если я попытаюсь создать еще одну функцию перед рендерингом, который будет выполняться на элементе CreateNewItem, он перестанет работать.

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

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

Если я запускаю код, не пытаясь вызвать функцию, тогда работает protectDefault. Если я пытаюсь запустить функцию, я получаю следующее сообщение об ошибке: «Ошибка типа: невозможно прочитать свойство 'protectDefault' из неопределенного». Я пытался связать это, а затем предотвращение сбоев работает, но функция не запускается.

this.props.onCreateNewItem.bind(this);

Я в замешательстве, потому что могу заставить работать работать Двигатель предотвращения без вызова функции, и я могу заставить функцию работать, если я вызываю ее непосредственно в форме, но я не могу заставить их обоих работать вместе.

1 Ответ

0 голосов
/ 16 февраля 2020

Вы должны 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>
...