[英]React this.props is null
我有以下內容:
import React from 'react';
import {render} from 'react-dom';
class TShirt extends React.Component {
render () {
return <div className="thsirt">{this.props.name}</div>;
}
}
class FirstName extends React.Component {
propTypes: {
name: React.PropTypes.string.isRequired
}
constructor(props) {
super(props);
this.state = {
submitted: false
};
}
getName () {
var name = this.refs.firstName.value;
this.setState(function() {
this.props.action(name);
});
}
handleSubmit (e) {
e.preventDefault();
this.setState({ submitted: true }, function() {
this.props.actionNav('color');
});
}
render () {
if(!this.state.submitted){
return (
<div>
<h2>tell us your first name</h2>
<form>
<input
type="text"
ref="firstName"
onChange={this.getName.bind(this)}
/>
<div className="buttons-wrapper">
<a href="#">back</a>
<button onClick={this.handleSubmit.bind(this)}>continue</button>
</div>
</form>
</div>
);
}
else {
return <PickColor color={this.props.colorVal} />;
}
}
}
class Link extends React.Component {
setActiveClass () {
if(this.props.el == this.props.activeClass){
return 'active';
}
}
render () {
var active = this.setActiveClass();
return (
<li className={active}>{this.props.el}</li>
);
}
}
class Nav extends React.Component {
render () {
var links = ['name', 'color', 'design', 'share'],
newLinks = [],
that = this;
links.forEach(function(el){
newLinks.push(<Link activeClass={that.props.active} key={el} el={el} />);
});
return (
<ul>
{newLinks}
</ul>
);
}
}
class PickColor extends React.Component {
getColorValue(event) {
console.log(event.target.getAttribute("data-color"));
console.log(this);
//this.props.color(event.target.getAttribute("data-color"));
}
render () {
var colors = ['red', 'purple', 'yellow', 'green', 'blue'],
colorsLink = [],
that = this;
colors.forEach(function(el){
colorsLink.push(<li data-color={el} key={el} onClick={that.getColorValue} ref={el}>{el}</li>);
});
return (
<ul>
{colorsLink}
</ul>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
color: '',
active: ''
};
this.getName = this.getName.bind(this);
this.setActiveNav = this.setActiveNav.bind(this);
this.setColor = this.setColor.bind(this);
}
getName (tshirt) {
this.setState({ name:tshirt })
}
setActiveNav (active) {
this.setState({ active:active })
}
setColor (color) {
this.setState({ color:color })
}
render () {
return (
<section className={this.state.color}>
<Nav active={this.state.active} />
<TShirt name={this.state.name} />
<FirstName name={this.state.name} action={this.getName} actionNav={this.setActiveNav} colorVal={this.setColor} />
</section>
);
}
}
render(<App/>, document.getElementById('app'));
在“PickColor”組件中我試圖這樣做:
getColorValue(event) {
console.log(event.target.getAttribute("data-color"));
console.log(this);
//this.props.colorVal(event.target.getAttribute("data-color"));
}
但是這在點擊時返回null,所以我無法繼續使用:
this.props.colorVal
解決方案在這里:
class PickColor extends React.Component {
getColorValue(event) {
console.log(event.target.getAttribute("data-color"));
this.props.color(event.target.getAttribute("data-color"));
}
render () {
var colors = ['red', 'purple', 'yellow', 'green', 'blue'],
colorsLink = [],
that = this;
colors.forEach(function(el){
colorsLink.push(<li data-color={el} key={el} onClick={that.getColorValue.bind(that)} ref={el}>{el}</li>);
});
return (
<ul>
{colorsLink}
</ul>
);
}
}
我必須將“that”綁定到forEach循環內的onClick
問題在於這一行:
onClick={that.getColorValue}
您忘記使用onClick事件處理函數綁定正確的this(類上下文),因為在getColorValue
函數中無法訪問this.props
。
解決方案:
可以使用多個解決方案,使用任何一個(所有這些更改都適用於PickColor組件):
1-點擊處理程序的內聯綁定:
onClick = { that.getColorValue.bind(this) }
2-在構造函數中綁定方法:
constructor(props) {
super(props);
this.state = { };
this.getColorValue = this.getColorValue.bind(this);
}
3-使用箭頭功能 :
onClick = {e => that.getColorValue(e) }
4-使用類屬性語法 :
onclick = {this.getColorValue}
getColorValue = (e) => {
console.log('e', this.props)
}
當您創建一個新函數時,如下所示:
function() {
this.props.action(name);
});
這綁定到新的函數上下文。 每個功能都有不同this
在JavaScript。 您可以通過以下幾種方式解決此問題:
如果你有箭頭功能(他們不會重新綁定)
() => {
this.props.action(name);
});
用bind重新綁定它
function() {
this.props.action(name);
}.bind(this));
保存this
一個變量
var that = this;
function() {
that.props.action(name);
});
選擇第一個,如果你有一個轉發器,如babel! 否則這是你的電話。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.