Props未定义React js

Question

Props未定义React js

11

我正在使用React JS，但不知道为什么会出现“props未定义”的错误。

这是我的类代码：

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/components/Parts/SmallBits/FormItems/TextInput.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();

只需点击它，它就会给我

未捕获的类型错误：无法读取 null 的属性“refs”

- andy wilson

@DavinTryon已经为您更新了它。 - andy wilson

4

"this.props" 应该翻译成 "这个属性"，而不是简单的 "属性"。 - Andrii Starusiev

这个回答解决了你的问题吗？React Props is Not Defined - Henke

3个回答

-1

import React from 'react'

export default function Component1(props){ return ( 我的名字是{props.name} ) }

- user20926874

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

不确定为什么在已经有答案的情况下你还回答了这个问题。但是稍微批评一下，尝试使用上面使用的代码并将其放入代码块中。 - andy wilson

-2

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 />
        );
    }
}

- Nitin Sharma

“仅有代码的答案并不是高质量的答案”。虽然这段代码可能很有用，但您可以通过解释它为什么有效、如何有效、何时应该使用以及其限制是什么来改进它。请编辑您的答案，包括解释和相关文档链接。 - Stephen Ostermiller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chaim Friedman · Accepted Answer

在一个类中访问 props 的方式是通过 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 = "";
}

我认为您有2个问题。首先，它没有嵌套在类中，所以this关键字不是指向该类。其次，即使它被嵌套了，一旦调用者调用此函数，this关键字的上下文将不再引用您的类。理解this关键字的工作原理并了解如何使用bind或=>函数来避免这种行为非常重要。