javascript - React MD Bootstrap: 入力値を取得する方法

Question

MD Bootstrap Reactを使用して、React でアプリをコーディングしています。入力コンポーネントから値を取得する際に問題が発生しています。

CreateLesson.js

import { Input, Button } from 'mdbreact';

class CreateLesson extends Component {
constructor (props) {
    super(props)

    this.state = {
        title: '',
        card1: ''
    }
}

handleTitle = (event) => {
    this.setState({
        title: event.target.value
    })
}

handleInput = (event) => {
    this.setState({
        [event.target.id]: event.target.value
    })
}

render () {
    return (
        <div>
            <h2>Create New Lesson</h2>
            <div className="row">
                <div className="col-md-6">
                    <div className="card create-lesson-card">
                    <span className="card-title">Flash Cards</span>
                        <Input label="Lesson Title"  onInput={this.handleTitle} />
                        <Input id="card1" label="Card One" value={this.state.card1} onInput={this.handleInput} />
                    </div>
                </div>
            </div>
        </div>
    )
    }
}

export default CreateLesson;

両方の入力で、ユーザーから入力を取得して状態を適切に設定しようとしているだけです。handleInput は動的に設計されています。これは、最終的にページに複数の入力が必要になるためです。

ただし、いずれかの入力フィールドに入力すると、エラーが発生します。 Uncaught TypeError: Cannot read property 'toString' of undefined

私は何を間違っていますか？

編集:エラーのスタック トレースを追加します。以下の 3 つのエラーはすべて毎回表示されます。

// Error One
Uncaught TypeError: Cannot read property 'toString' of undefined
at TextField.render (mdbreact.js:2148)
at finishClassComponent (react-dom.development.js:7873)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)

// Error Two
The above error occurred in the <TextField> component:
in TextField (created by Input)
in Input (at CreateLesson.js:75)
in div (at CreateLesson.js:69)
in div (at CreateLesson.js:68)
in div (at CreateLesson.js:67)
in div (at CreateLesson.js:64)
in CreateLesson (created by Route)
in Route (at index.js:20)
in div (at index.js:18)
in Router (created by BrowserRouter)
in BrowserRouter (at index.js:17)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://redacted to learn more about error boundaries.

// Error Three
Uncaught TypeError: Cannot read property 'toString' of undefined
at TextField.render (mdbreact.js:2148)
at finishClassComponent (react-dom.development.js:7873)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)