reactjs 属性未定义React js

4xrmg8kj 于 2023-01-04 发布在 React

关注(0)|答案(3)|浏览(180)

我使用react js，我不知道为什么我得到的 prop 没有定义。
这是我的课。

import React, { Component } from 'react';

const InputHeight = {
    height: '50px',
}

function clearData() {
    this.refs.input.value = "";
}


export default class TextInput extends Component {
    render() {
        return (
            <input
                className="form-control"
                ref="input"
                name={props.name}
                type={props.inputType}
                value={props.content}
                pattern={props.pattern}
                onChange={props.controlFunc}
                placeholder={props.placeholder}
                style={InputHeight}
                required />
        );
    }
}

TextInput.propTypes = {
    inputType: React.PropTypes.oneOf(['text', 'number', 'email']).isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

无法编译。/src/组件/部件/小位/表格项目/文本输入. js第19行：'props'未定义no-undef第20行：'props'未定义no-undef第21行：'props'未定义no-undef第22行：'props'未定义no-undef第23行：'props'未定义no-undef第24行："props"未定义no-undef
搜索关键字以了解有关每个错误的详细信息。

this.refs.form.clearData();

只要按一下它就会给我
未捕获的类型错误：无法读取空值的属性"refs"

reactjs

来源：https://stackoverflow.com/questions/44850215/props-is-not-defined-react-js

3条答案

按热度按时间

mznpcxlj1#

在一个类中，访问 prop 的方式是this.props，而不仅仅是props。

export default class TextInput extends Component {
    render() {
        return (
            <input
                className="form-control"
                ref="input"
                name={this.props.name}
                type={this.props.inputType}
                value={this.props.content}
                pattern={this.props.pattern}
                onChange={this.props.controlFunc}
                placeholder={this.props.placeholder}
                style={InputHeight}
                required />
        );
    }
}

下面是使用此更改修订的代码。
对于这个功能

function clearData() {
    this.refs.input.value = "";
}

我认为您有两个问题。第一，它没有嵌套在类中，因此this关键字没有引用该类。第二，即使它是嵌套的，一旦调用者调用此函数，this关键字的上下文现在将不再引用您的类。了解this关键字的工作原理以及如何使用bind或=>函数来解决此问题非常重要。

赞(0）回复(0）举报 2023-01-04

um6iljoc2#

从"react"导入React
导出默认函数Component1（props）{return（我的名字是{props.name}）}

赞(0）回复(0）举报 2023-01-04

smdncfj33#

import React, { Component } from 'react';

const InputHeight = {
    height: '50px',
}

function clearData() {
    this.refs.input.value = "";
}


export default class TextInput extends Component {
    render(props) {
        return (
            <input
                className="form-control"
                ref="input"
                name={props.name}
                type={props.inputType}
                value={props.content}
                pattern={props.pattern}
                onChange={props.controlFunc}
                placeholder={props.placeholder}
                style={InputHeight}
                required />
        );
    }
}

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 属性未定义React js

3条答案

相关问题

热门标签

最新问答