时间戳

首页 > 解决方案 > 在 React 中提交表单时收到未定义的错误？

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

问题描述

我正在我的 React 应用程序中创建一个表单元素。当我尝试将表单值保存在 const 中时，出现错误“未捕获的类型错误：无法读取未定义的属性‘值’”。这是我的组件的片段：

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”，但发生了同样的错误。任何想法，将不胜感激！如果您需要更多信息，请告诉我:)

标签： javascriptreactjsformseventsform-submit

解决方案

你没有 element 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 }));
};

推荐阅读