javascript - 使用 pouchdb 反应应用程序，将 props 传递给表单提交

Question

我有一个反应应用程序，我已经将 PouchDB 引入其中，并且我在测试中取得了一些成功，但现在我正在尝试使用模式中的表单来保存数据，但我遇到了错误。

问题：在 New.js（在 MedJournalComponent 的模态中加载）中，表单有两个字段和一个提交按钮。当我提交时，我收到错误Unhandled Rejections (typeerror): this.props.onSave is not a function

该结构以 app.js 开头（它将 DB 和 regsiters medjournalcomponent 建立为路由）。在 medjournalcomponent 中，我有一个模式，当它打开时，会加载带有表单的 new.js 文件。

似乎道具的传递是我的问题。

我该如何解决这个问题，以便提交从现在的位置开始工作？

应用程序.js

class App extends React.Component {

    state = { 
        db: new DB('notes-react'),
        selectedItem: 'Dashboard',
        notes: {} 
    };



   async componentDidMount() {
        const notes = await this.state.db.getAllNotes();

        this.setState({
            notes
        });
    }

    handleSave = async (note) => {

        let { id } = await this.state.db.createNote(note);

        const { notes } = this.state;

        this.setState({
            notes: {
                ...notes,
                [id]: note
            }
        });

        return id;
    }


    render() {
        const { selectedItem } = this.state;
        return (
            <Router>
                <Row className={css(styles.container)}>
                    <SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
                    <Column flexGrow={1} className={css(styles.mainBlock)}>
                        <HeaderComponent title={selectedItem} />
                        <div className={css(styles.content)}>
                            <Switch>
                                <Route path="/medJournal" component={(props) => <MedJournalComponent {...props} onSave={this.handleSave} /> } />
                            </Switch>
                        </div>
                    </Column>
                </Row>
            </Router>
        );
    }
}

export default App;

medjournalcomponent.js

class MedJournalComponent extends React.Component {

      state = {
        open: false
      };

      onOpenModal = () => {
        this.setState({ open: true });
      };

      onCloseModal = () => {
        this.setState({ open: false });
      };


    render() {
        const { open } = this.state;
        return (
            <Column>

                <Row className={css(styles.cardsContainer)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 580: 'column' }}>
                    <Row className={css(styles.cardRow)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 580: 'column' }}>

                        <Modal style={{width: '400px'}} className={css(styles.journalModal)} open={open} onClose={this.onCloseModal}>
                            <div style={{width: '800px'}}>
                                <NewPage />
                            </div>
                        </Modal>

                    </Row>
                </Row>

            </Column>
        );
  }
}

export default MedJournalComponent;

新的.js

import React from 'react';

export default class NewPage extends React.Component {
    state = {
        note: {
            title: '',
            body: '',
            createdAt: undefined,
            updatedAt: undefined
        }
    }

    updateValue = (e) => {
        const { note } = this.state;

        this.setState({
            note: { ...note,[e.target.name]: e.target.value}
        })
    }

    handleSave = async (e) => {
        e.preventDefault();

         const id = await this.props.onSave(this.state.note);

    }

    render() {
        const { note } = this.state;
        return (
            <div >
                <h1>New Notebook Entry</h1>
                <div style={{display:'flex', flex:1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', alignSelf:'stretch'}}>
                <form style={{flex:1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', alignSelf:'stretch'}} onSubmit={this.handleSave}>
                    <div>
                    <label style={{display:'block', alignSelf:'stretch', marginBottom:15}} >Title</label>
                    <input placeholder="Entry Title/Subject" style={{marginBottom:15,display:'block', width: '80%', border:'none', borderBottom:'1px solid gray'}}  type="text" name="title" value={note.title} onChange={this.updateValue} />
                    </div>

                    <div>
                        <label style={{display:'block', marginBottom:15}} >Summary</label>
                        <textarea style={{marginBottom:15,display:'block', width: '80%', resize:'none', width:'100%', height: '130px', border:'1px solid gray'}}  name="body" value={note.body} onChange={this.updateValue} />
                    </div>

                    <div style={{textAlign:'center'}}>
                        <button style={{textAlign:'center', margin: '0 auto'}}>Save</button>
                    </div>
                </form>
                </div>
            </div>
        )
    }
}

标签： javascriptreactjs