在 React 中提交表单时收到未定义的错误？

Question

我正在我的 React 应用程序中创建一个表单元素。当我尝试将表单值保存在 const 中时，出现错误 "Uncaught TypeError: Cannot read property 'value' of undefined"。这是我的组件的一个片段：

export default class LookupTag extends React.Component {
    state= {
        error: undefined
    };

    getProductData = (e) => {
        e.preventDefault();
        const upc = e.target.elements.option.value;
        const error = this.props.getProductData(upc);

        this.setState(() => ({ error }));
    };

    render(){
        return(
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form onSubmit={this.getProductData}>
                    <input type='text' name='upc'/>
                </form>
            </div>
        )
    }
}

请注意，我使用的是一个名为 "transform-class-properties" 的 babel 插件，它允许我完全删除构造函数（也不是绑定问题）。具体错误是引用我设置 "const upc = e.target.elements.option.value;" 的行。我也试过只使用 "e.target.value" 但同样的错误发生了。任何想法，将不胜感激！如果您需要更多信息，请告诉我:)

Answer 1

您没有元素 option，因此 e.target.elements.option 会给您 undefined，尝试访问 value 会导致您的错误.

e.target.elements.upc.value 可以。

getProductData = (e) => {
    e.preventDefault();
    const upc = e.target.elements.upc.value;
    const error = this.props.getProductData(upc);

    this.setState(() => ({ error }));
};

在 React 中提交表单时收到未定义的错误？

Receiving an undefined error when submitting a form in React?

javascript

forms

events

form-submit

reactjs