javascript - reactjs:未捕获类型错误:无法读取未定义的属性 'value'-6ren

javascript - reactjs:未捕获类型错误:无法读取未定义的属性 'value'

转载作者：行者123 更新时间：2023-11-29 23:55:03

从类似这样的东西中进行 react render 后出现错误

            return (
                React.createElement('form', {
                        onSubmit: this.onSubmit,
                        className: 'ContactForm',
                        noValidate: true
                    },
                    React.createElement('input', {
                        type: 'text',
                        className: errors.name && 'ContactForm-error',
                        placeholder: 'Name',
                        onInput: this.onNameInput,
                        value: this.props.value.name,
                    }),
                    React.createElement('button', {
                        type: 'submit'
                    }, "Add Contact")
                )
            );

像这样

            function create_input_element(type, fieldname){
                var capital_fieldname = capitalize(fieldname);
                return React.createElement('input', {
                    type: type,
                    className: errors[fieldname] && 'ContactForm-error',
                    placeholder: capitalize(capital_fieldname),
                    onInput: this['on' + capital_fieldname + 'Input'],
                    value: this.props.value[fieldname],
                    autoFocus: true,
                })
            }

           create_input_element('text', 'name')

问题出在 this.props.value[fieldname]，甚至 this.props.value.name 也会因同样的错误而中断。

具体代码是

<head>
    <style>
        body {
            font-family: Tahoma, sans-serif;
            margin: 0;
        }

        .ContactView-title {
            font-size: 24px;
            padding: 0 24px;
        }

        .ContactView-list {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 1px solid #f0f0f0;
        }

        .ContactItem {
            margin: 0;
            padding: 8px 24px;
            border-bottom: 1px solid #f0f0f0;
        }

        .ContactItem-email {
            font-size: 16px;
            font-weight: bold;
            margin: 0;
        }

        .ContactItem-name {
            font-size: 14px;
            margin-top: 4px;
            font-style: italic;
            color: #888;
        }

        .ContactItem-description {
            font-size: 14px;
            margin-top: 4px;
        }

        .ContactForm {
            padding: 8px 24px;
        }

        .ContactForm>input {
            display: block;
            width: 240px;
            padding: 4px 8px;
            margin-bottom: 8px;
            border-radius: 3px;
            border: 1px solid #888;
            font-size: 14px;
        }

        .ContactForm>input.ContactForm-error {
            border-color: #b30e2f;
        }
    </style>

    <meta name="description" content="Ridiculously Simple Forms with Raw React - Exercise Two">
    <script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div id="react-app"></div>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

    <script>
        /*
         * Components
         */

         function capitalize(str){
             return str.charAt(0).toUpperCase() + str.substring(1)
         }


        var ContactForm = React.createClass({
            propTypes: {
                value: React.PropTypes.object.isRequired,
                onChange: React.PropTypes.func.isRequired,
                onSubmit: React.PropTypes.func.isRequired,
            },

            onEmailInput: function(e) {
                this.props.onChange(Object.assign({}, this.props.value, {
                    email: e.target.value
                }));
            },

            onNameInput: function(e) {
                this.props.onChange(Object.assign({}, this.props.value, {
                    name: e.target.value
                }));
            },

            onSubmit: function(e) {
                e.preventDefault();
                this.props.onSubmit();
            },

            render: function() {
                var errors = this.props.value.errors || {};

                function create_input_element(type, fieldname){
                    var capital_fieldname = capitalize(fieldname);
                    return React.createElement('input', {
                        type: type,
                        className: errors[fieldname] && 'ContactForm-error',
                        placeholder: capitalize(capital_fieldname),
                        onInput: this['on' + capital_fieldname + 'Input'],
                        value: this.props.value[fieldname],
                        autoFocus: true,
                    })
                }

                return (
                    React.createElement('form', {
                            onSubmit: this.onSubmit,
                            className: 'ContactForm',
                            noValidate: true
                        },
                        create_input_element('email', 'email'),
                        create_input_element('text', 'name'),
                        React.createElement('button', {
                            type: 'submit'
                        }, "Add Contact")
                    )
                );
            },
        });


        var ContactItem = React.createClass({
            propTypes: {
                name: React.PropTypes.string.isRequired,
                email: React.PropTypes.string.isRequired,
            },

            render: function() {
                return (
                    React.createElement('li', {
                            className: 'ContactItem'
                        },
                        React.createElement('h2', {
                            className: 'ContactItem-email'
                        }, this.props.email),
                        React.createElement('span', {
                            className: 'ContactItem-name'
                        }, this.props.name)
                    )
                );
            },
        });


        var ContactView = React.createClass({
            propTypes: {
                contacts: React.PropTypes.array.isRequired,
                newContact: React.PropTypes.object.isRequired,
                onNewContactChange: React.PropTypes.func.isRequired,
                onNewContactSubmit: React.PropTypes.func.isRequired,
            },

            render: function() {
                var contactItemElements = this.props.contacts
                    .map(function(contact) {
                        return React.createElement(ContactItem, contact);
                    });

                return (
                    React.createElement('div', {
                            className: 'ContactView'
                        },
                        React.createElement('h1', {
                            className: 'ContactView-title'
                        }, "Contacts"),
                        React.createElement('ul', {
                            className: 'ContactView-list'
                        }, contactItemElements),
                        React.createElement(ContactForm, {
                            value: this.props.newContact,
                            onChange: this.props.onNewContactChange,
                            onSubmit: this.props.onNewContactSubmit,
                        })
                    )
                );
            },
        });



        /*
         * Constants
         */


        var CONTACT_TEMPLATE = {
            name: "",
            email: "",
            description: "",
            errors: null
        };




        /*
         * Model
         */


        // The app's complete current state
        var state = {};

        // Make the given changes to the state and perform any required housekeeping
        function setState(changes) {
            Object.assign(state, changes);

            ReactDOM.render(
                React.createElement(ContactView, Object.assign({}, state, {
                    onNewContactChange: updateNewContact,
                    onNewContactSubmit: submitNewContact,
                })),
                document.getElementById('react-app')
            );
        }

        // Set initial data
        setState({
            contacts: [{
                key: 1,
                name: "James K Nelson - Front End Unicorn",
                email: "james@jamesknelson.com"
            }, {
                key: 2,
                name: "Jim",
                email: "jim@example.com"
            }, ],
            newContact: Object.assign({}, CONTACT_TEMPLATE),
        });



        /*
         * Actions
         */


        function updateNewContact(contact) {
            setState({
                newContact: contact
            });
        }


        function submitNewContact() {
            var contact = Object.assign({}, state.newContact, {
                key: state.contacts.length + 1,
                errors: {}
            });

            if (!/.+@.+\..+/.test(contact.email)) {
                contact.errors.email = ["Please enter your new contact's email"];
            }
            if (!contact.name) {
                contact.errors.name = ["Please enter your new contact's name"];
            }

            setState(
                Object.keys(contact.errors).length === 0 ?
                {
                    newContact: Object.assign({}, CONTACT_TEMPLATE),
                    contacts: state.contacts.slice(0).concat(contact),
                } :
                {
                    newContact: contact
                }
            );
        }
    </script>

</body>

为什么我不能在函数中生成 React.createElement() 东西？谢谢

最佳答案

这是一个范围问题。你可以learn here how the variable this works .

要解决您的问题，您可以使用 call 显式传递调用函数的作用域的 this 变量。

代码如下所示:create_input_element.call(this, 'email', 'email')

关于javascript - reactjs:未捕获类型错误:无法读取未定义的属性 'value'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41897350/

文章推荐： mysql - 不要使用 mysql 从具有两个表的数据库中选择数据

文章推荐： java - Android:如何单独绘制.svg文件元素？

文章推荐： java - JDBC MySQL 提示连接过多

文章推荐： javascript - 如何将文本附加到 d3js v4 中的规范化堆叠图表

reactjs - ReactJS 中的非标准自定义属性？
这是关于非标准属性的。 https://facebook.github.io/react/docs/tags-and-attributes.html 在 react 中我做了这个: React.cr
reactjs - ReactJS 如何在组件之间传递数据？
我制作了 2 个组件:1)内容(使用 fetch() 显示数据)2)分页(共5页，每页16个对象) 我创建了 2 个状态变量，分别称为 start:0 和 end:16。现在，每当用户单击页码时，我都
reactjs - ReactJS 中的嵌入式文档查看器控件
我们正在使用 ReactJS 创建一个搜索前端。要求是当用户单击文档名称时，该文档必须在嵌入式查看器中打开。有人为此使用过任何 ReactJS 组件吗？否则，我应该使用 JQuery 查看器组件吗？请
reactjs - 登录 Reactjs
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 1 年前。
reactjs - ReactJS 最流行的后端框架是什么？
我现有的项目: 前端框架 - PHP Codeigniter 和 PHP Laravel 后端框架 - JAVA Springboot 我正在尝试将前端框架更改为 ReactJS。我想知道与 Reac
reactjs - Reactjs 中的递归操作调用
我有一个实现刷新授权 token 的方案。在这种情况下，我为每种操作(发布、获取、删除)实现了一个通用操作，并使用参数调用它们。 export function Get(param) { return
reactjs - (ReactJS) 如何获取日期类型输入的输入值？
我现在有 { _this.setState({startDate: input})}}/> 无论我一直在改变什么(onChange 部分到 ref 等等)，当我 console.log 我的状态时，
reactjs - 测试在按钮上呈现另一个组件单击 ReactJS
我在两个不同的文件中有两个单独的组件组件A 和组件B 我在中有一个按钮组件B 现在我想测试当中的特定按钮时组件B 被点击，组件A 应呈现如下: import { render, screen,
reactjs - 在渲染方法中设置状态 - Reactjs
我有一个包含几个问题的表格。一些问题有一组子问题。这些是使用以下代码呈现的。 { Object.keys(this.props.moduleDetails.questions).map(
reactjs - 如何将数据从一个组件传递到另一个 ReactJS
我有两个组件。第一个状态初始化: import React from 'react'; class One extends React.Component { constructor(prop
reactjs - 如何在对象数组中添加一个对象？ ReactJS？
我的项目是一个对象数组，我只获取名称并在 3 in 3 的屏幕上渲染，使用“下一个”和“上一个”按钮更改名称，并且可以过滤字母。我想要添加一个新值，在输入中键入并单击按钮添加。我的代码按钮: ad
reactjs - 从几个地方操作一个组件实例 ReactJS
我有一个组件实例，应该从不同的地方更新。如何从其他几个组件中更新此组件的 props？ class ParentComponent extends React.Component { ...
reactjs - 基于变量的渲染组件 - ReactJS
我想问，是否可以基于变量返回一个组件，我的想法是否可以: var location = this.props.location // Eg. Asia,Australia 我的问题是我需要单独手动导
reactjs - 自动选择输入中的文本 - Reactjs
有没有办法在渲染后立即选择要覆盖的文本？我的意思是选择 - 最佳答案您可以尝试使用两种方法.focus和.select .focus() method sets focus on the speci
reactjs - 如何在提交中传递表单变量？ ReactJS
我渲染了以下内容: 这是事件处理程序: handleCompanySubmit(event) { console.log("company submit") e
reactjs - reactjs datepicker日期格式
作为ReactJS的初学者，我现在使用出色的ReactJS Datepicker。有关我的自定义日期格式的问题: 我没有找到任何文档来解释所有可能性，例如M是月份，MM是2个字母的月份，依此类推。(我
reactjs - ReactJs 中的搜索表
我创建了一个表并正在对其进行过滤，但是当我清除搜索查询时，表数据不会显示，并且表会卡在查询结果上。SearchBox 是文本框，TableData 是表格，在 Container 中我正在更改 Sea
reactjs - 如何更新表中特定行的状态 ReactJS
我在表格设置中有图标，这样当单击图标时，会呈现不同的图标。现在这工作正常，但我想为我单击的行中的特定行重新呈现不同的图标，而不是在每一行中重新呈现不同的图标。不知道我将如何去做这件事。这是我的代码:
reactjs - 更改不同组件的状态 - ReactJS
我正在尝试使用 React 构建一个简单的应用程序，它有两个组件，一个嵌入另一个组件。子组件是一个收缩的菜单，单击它时，它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。这是父组件的样子
reactjs - ReactJS 如何在用户不活动时自动注销？
我需要知道 REACT JS 或 HTML5 中是否有任何 API 可以提供用户不活动时自动注销的功能。我的代码如下，我不知道出了什么问题，它给了我错误 startTimer 未定义和不必要的绑定(b

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - reactjs:未捕获类型错误:无法读取未定义的属性 'value'