javascript - 在 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 插件，它允许我完全删除构造函数(也不是绑定(bind)问题)。具体错误是引用我设置“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 }));
};