[英]Props is not defined React js
我正在使用 React js,我不知道为什么我得到的道具没有定义。
这是我的 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,
};
编译失败。/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();
只是 onClick 它给了我
未捕获的类型错误:无法读取 null 的属性“refs”
在课堂上,访问道具的方式是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
或=>
函数来解决此问题非常重要。
从“反应”导入反应
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.