0

我正在使用MD Bootstrap React在 React 中编写应用程序。我在从Input 组件中获取值时遇到问题。

创建课程.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

我究竟做错了什么？

编辑：为错误添加堆栈跟踪。每次都会出现以下所有三个错误。

// 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)
4

2 回答 2

2

有一个名为的方法getValue（它在更改时返回输入的值）。查看文档-> API 部分。

于 2019-01-07T11:11:01.667 回答
1

我认为onInputMD Bootstrap React 中没有 prop，尝试使用onChange.

于 2018-02-24T20:20:06.070 回答