Question

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

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

我做错了什么？

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

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

Answer 1

有一个名为getValue的方法（更改后将返回输入值）。查看the documentation-> API部分。

Answer 2

我认为MD Bootstrap React中没有onInput道具，请尝试使用onChange。

React MD Bootstrap：如何获取输入值

2 个答案: