Блог

Главная - Вопросы по программированию - Обработка данных формы в PreactJS

Обработка данных формы в PreactJS

#forms #preact

#формы #предварительное действие

Вопрос:

Я переношу приложение react на preact. Обработка данных из формы при отправке выдает TypeError: this.createIssue is not a function at Object.createTestIssue [as click] ошибку.

Код выглядит следующим образом:

 class IssueList extends Component {
  state = { issues: [] };

  createIssue(newIssue) {
    const updatedIssues = this.state.issues.slice();
    newIssue.id = this.state.issues.length   1;
    updatedIssues.push(newIssue);
    this.setState({ issues: updatedIssues });
  }

  createTestIssue() {
    const issue = {
      status: 'New',
      owner: 'Pieta',
      created: new Date(),
      title: 'Completion date should be optional'
    };
    this.createIssue(issue);
  }

  render(props, state) {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <IssueFilter />
        <hr />
        <IssueTable issues={state.issues} />
        <hr />
        <IssueAdd createIssue={this.createIssue} />
        <hr />
        <button onClick={this.createTestIssue}>Add Test</button>
      </div>
    );
  }
}

export default IssueList;

Я попытался создать конструктор и задать состояние изнутри конструктора, однако есть ReferenceError: state is not defined at new IssueList .

Я просмотрел linkState модуль, который preact рекомендует для форм, однако я не смог правильно его настроить. Передаю ли я пустой объект и объект с данными, которые я хочу добавить в свой массив; что-то вроде:

 render({}, { state }) {
  ...
}

Но это не позволяет мне получить доступ к состоянию. Приветствуется любая помощь.

Комментарии:

1. Используете ли вы preact-compat ? Может упростить процесс, поскольку позволяет использовать API-интерфейсы react в preact.

2. Я использую "preact-compat": "^3.18.4" . Заменив весь код, который работает в React, я теперь получаю Uncaught ReferenceError: state is not defined at IssueList.createIssue at IssueList.createTestIssue at HTMLButtonElement.eventProxy .

3. Вы видели мой ответ? Я думаю, что ваша деструктуризация неверна

4. Да, у меня есть деструктурирование render({}, { key, value }) { ... } , как вы предложили. Я все еще получаю, TypeError: this.createIssue is not a function at Object.createTestIssue [as click] когда нажимаю Add Test кнопку. Чего мне не хватает, что не позволяет мне получить доступ к функции?

Ответ №1:

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

 render(props, state) {
  ...
}

Это позволяет использовать деструктурирование#MOZDocs для 

 render({}, { state }) {
  ...
}

То, что у вас есть ^^, не принесло бы пользы и могло бы скрыть состояние за другим объектом. То, что у вас должно быть, это:

 render({}, { ...state }) {
  ...
}

ИЛИ, на мой взгляд, лучшее решение, предполагающее state = {key: 'test', value: 1} :

 render({}, { key, value }) {
  ...
}

Если вы не хотите использовать что-либо из props, вы можете либо использовать пустой объект, как показано выше, либо просто иметь props , но затем не использовать его.