Обработка данных формы в PreactJS - PullRequest
Новая
       16

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

0 голосов
/ 03 апреля 2019

Я портирую приложение реагирования на 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 Ответ

0 голосов
/ 04 апреля 2019

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

render(props, state) {
  ...
}

Это позволяет вам использовать destruuring # MOZDocs до 

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

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

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

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

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

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

...