Javascript 道具未定义 React js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44850215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Props is not defined React js
提问by andy wilson
I'm using react js and I don't know why I'm getting props isn't defined.
我正在使用 react js，但我不知道为什么我没有定义道具。
Here is my class.
这是我的课。
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,
};
Failed to compile ./src/components/Parts/SmallBits/FormItems/TextInput.js Line 19: 'props' is not defined no-undef Line 20: 'props' is not defined no-undef Line 21: 'props' is not defined no-undef Line 22: 'props' is not defined no-undef Line 23: 'props' is not defined no-undef Line 24: 'props' is not defined no-undef
Search for the keywords to learn more about each error.
编译失败定义了 no-undef 第 22 行：'props' 未定义 no-undef 第 23 行：'props' 未定义 no-undef 第 24 行：'props' 未定义 no-undef
搜索关键字以了解有关每个错误的更多信息。
this.refs.form.clearData();
just onClick that and it gives me
只需点击它，它就会给我
Uncaught TypeError: Cannot read property 'refs' of null
未捕获的类型错误：无法读取 null 的属性“refs”
回答by Chaim Friedman
In a class the way to access props is this.propsnot just props.
在一个类中，访问 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 />
);
}
}
Here is your code revised with this change.
这是您通过此更改修订的代码。
As for this function
至于这个功能
function clearData() {
this.refs.input.value = "";
}
You have 2 issues I believe. First, it is not nested within the class so the thiskeyword is not referring to this class. Second, even if it was nested, once the caller calls this function, the thiskeyword's context would now no longer be referring to your class. It is important to understand how the thiskeyword works and how to either use bindor =>functions to get around this behavior.
我相信你有两个问题。首先，它没有嵌套在类中，所以this关键字不是指这个类。其次，即使它是嵌套的，一旦调用者调用此函数，this关键字的上下文现在将不再引用您的类。了解this关键字的工作原理以及如何使用bind或=>函数来解决此行为非常重要。
