[英]Props is not defined React js
I'm using react js and I don't know why I'm getting props isn't defined.我正在使用 React js,我不知道为什么我得到的道具没有定义。
Here is my class.这是我的 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
编译失败。/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
Search for the keywords to learn more about each error.
搜索关键字以了解有关每个错误的更多信息。
this.refs.form.clearData();
just onClick that and it gives me只是 onClick 它给了我
Uncaught TypeError: Cannot read property 'refs' of null
未捕获的类型错误:无法读取 null 的属性“refs”
In a class the way to access props is this.props
not just 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. 我相信你有2个问题。 First, it is not nested within the class so the
this
keyword is not referring to this class. 首先,它没有嵌套在类中,因此
this
关键字不是指这个类。 Second, even if it was nested, once the caller calls this function, the this
keyword's context would now no longer be referring to your class. 其次,即使它是嵌套的,一旦调用者调用此函数,
this
关键字的上下文现在将不再引用您的类。 It is important to understand how the this
keyword works and how to either use bind
or =>
functions to get around this behavior. 了解
this
关键字的工作原理以及如何使用bind
或=>
函数来解决此问题非常重要。
import React from 'react'从“反应”导入反应
export default function Component1(props){ return ( My name is {props.name} ) } export default function Component1(props){ return ( My name is {props.name} ) }
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 /> ); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.