绑定(this)在ReactJS和on更改更新到状态

Question

我有以下代码：

索引.js

class App extends React.Component {
constructor() {
super();
this.state = {
homeLink: "Home"
};
}
onGreet() {
alert("Hello!");
}
onChangeLinkName(newName) {
this.setState({
homeLink: newName
});
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header homeLink={this.state.homeLink}/>
</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Home
name={"Max"}
initialAge={27}
greet={this.onGreet}
changeLink={this.onChangeLinkName.bind(this)}
initialLinkName={this.state.homeLink}
/>
</div>
</div>
</div>
);
}
}

和 首页.js

export class Home extends React.Component {
constructor(props) {
super();
this.state = {
age: props.initialAge,
status: 0,
homeLink: props.initialLinkName
};
}
onMakeOlder() {
this.setState({
age: this.state.age + 3
});
}
onChangeLink() {
this.props.changeLink(this.state.homeLink);
}
onHandleChange(event) {
this.setState({
homeLink: event.target.value
});
}
render() {
return (
<div>
<p>In a new Component!</p>
<p>Your name is {this.props.name}, your age is {this.state.age}</p>
<p>Status:  {this.state.status}</p>
<hr/>
<button onClick={() => this.onMakeOlder()} className="btn btn-primary">Make me older!</button>
<hr/>
<button onClick={this.props.greet} className="btn btn-primary">Greet</button>
<hr/>
<input type="text" value ={this.state.homeLink}
onChange={(event) => this.onHandleChange(event)}/>
<button onClick={this.onChangeLink.bind(this)} className="btn btn-primary">Change Header Link</button>
</div>
);
}
}

一旦我在input字段中写了一些东西并更新到state，就会触发input标签中的onChange吗？当我在input字段中编写内容时，我看不到Chrome中React Developer Tool扩展程序中的state变化。

当我单击按钮this.onChangeLink它会触发onChangeLink功能。onChangeLink似乎没有任何参数，因为制动器是空的，我仍然可以在onChangeLink函数内传递this.state.homeLinkthis.props.changeLink。this.props.changeLink这也是index.js中的一个函数，它接受一个参数newName。我想这就是bind(this)的用武之地。bind(this)做什么？我可以用像(event) => this.onChangeLink(event)这样的胖箭头函数重写它吗？

Answer 1

bind是Function.prototype中的一个函数，它返回绑定到当前this的函数对象。

onClick={this.onChangeLink.bind(this)}

在这里onClick函数将作为具有当前上下文的处理程序传递。

箭头函数根本不会创建新的this上下文。this将引用定义函数的上下文。

箭头函数不会创建自己的 this 上下文，因此这在封闭上下文中具有其原始含义。

onChange={(event) => this.onChangeLink(event)}

在这里，即使onChangeLink未绑定，也会在同一this上下文中的箭头函数中调用它。

所以..是的，你可以用一个胖箭头符号代替它以获得相同的效果。尽管在这种情况下，您必须重写参数列表两次。

Answer 2

您不需要onChangeLinkHome组件。您可以直接将值传递给组件App。

class Home extends React.Component {
constructor(props) {
super();
this.state = {
age: props.initialAge,
status: 0,
homeLink: props.initialLinkName
};
}
onMakeOlder() {
this.setState({
age: this.state.age + 3
});
}
onHandleChange(event) {
this.setState({
homeLink: event.target.value
});
}
render() {

return (
<div>
<input type="text" value ={this.state.homeLink}
onChange={(event) => this.onHandleChange(event)}/>
<button onClick={()=>this.props.changeLink(this.state.homeLink)} className="btn btn-primary">Change Header Link</button>
</div>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
homeLink: "Home"
};
}
onGreet() {
alert("Hello!");
}
onChangeLinkName(newName) {
this.setState({
homeLink: newName
});
}
render() {
console.log(this.state)
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">

</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Home
name={"Max"}
initialAge={27}
greet={this.onGreet}
changeLink={this.onChangeLinkName.bind(this)}
initialLinkName={this.state.homeLink}
/>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>