Props 未定义 React js

Question

我正在使用 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'

Answer 1

在一个类中，访问道具的方式是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 或=> 函数来解决此问题非常重要。

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