我终于开始使用react和ES6了，它进展顺利，但是我最终陷入困境，可以使用一些指导。
我已经尽力将this绑定到引用该类的方法上，但是我试图做得更深一些。以这个为例...它可以按预期工作：
class App extends Component {
state = {
myFirstState: false,
};
handleMyFirstState = () => {
this.setState( { myFirstState : true } );
};
render() {
return (
<MyComponent handleMySate={ this.handleMyState } />
);
}
}
export default App;
随着方法数量的增加，我决定不将每种方法分别作为道具传递，而是先将它们分组在一个对象中，而只是将整个对象作为道具传递。像这样...
class App extends Component {
state = {
myFirstState: false,
mySecondState: false
};
handleMyFirstState = () => {
this.setState( { myFirstState : true } );
};
handleMySecondSate = () => {
this.setState( { mySecondState : true } );
};
render() {
const handleStates = {
first : this.handleMyFirstState,
second : this.handleMySecondState
}
return (
<MyComponent handleStates={ handleStates } />
);
}
}
export default App;
现在，我在尝试避免冗余代码，而只是在渲染开始之前将方法构建为一个具有函数作为属性的对象。很像这样...
class App extends Component {
state = {
myFirstState: false,
mySecondState: false
};
handleStates = {
// Here is where 'this' does not reference the App class
// I get results from the console log but setstate doesn't pass correctly
first : () => { console.log("First Triggered"); this.setState( { myFirstState : true } ); },
second : () => { console.log("Second Triggered"); this.setState( { mySecondState : true } ); }
};
render() {
return (
<MyComponent handleStates={this.handleStates} />
);
}
}
export default App;
// I trigger the function like this within MyComponent and I get the console log, but `this.setState` breaks.
<Button onClick={ this.props.handleState.first } >Handle First</button>
我已经使用后一个代码成功地从子组件
<MyComponent/>触发了函数，但是this不再引用该类，并且我不知道如何将this绑定到handleStates，因为它不是一个功能。这是不可能的还是有另一种方式来处理我要达到的目标？
先感谢您！
额外
如果我将
handleStates移到render()上就可以了……那怎么可能？class App extends Component {
state = {
myFirstState: false,
mySecondState: false
};
render() {
const handleStates = {
first : () => { this.setState( { myFirstState : true } ); },
second : () => { this.setState( { mySecondState : true } ); }
};
return (
<MyComponent handleStates={this.handleStates} />
);
}
}
export default App;
最佳答案
首先，在第二个示例中，将this.handleStates作为prop handleStates的值传递，但是它是未定义的。您将handleStates构建为局部变量，因此希望您的道具引用该局部变量：
<MyComponent handleStates={handleStates} />
对于第三个（最后一个）示例，您的问题甚至更简单：您将
handleStates定义为this上的一个属性，该属性被分配了一个对象，该对象本身具有两个属性first和second，每个属性都有一个作为他们的价值。当最终将
this.handleStates传递给MyComponent时，您传递的是对象，而不是函数。如果要从first调用second或MyComponent之一，则可以这样操作：this.props.handleStates.first()
具有更新
App中状态的预期结果。对于它的价值，这里有一个更常见的模式：只需传递一个更新程序函数作为prop，并根据其功能进行命名：
class Sandwich extends React.Component {
this.state = {
bread: "",
meat: "",
veggie: "",
}
updateSandwich = (component, selection) => {
this.setState({ [component]: selection })
}
render() {
return(<IngredientSelector updateSandwich={this.updateSandwich} />)
}
}
class IngredientSelector extends React.Component {
return(){
<button value="Rye" onClick={() => this.updateSandwich("bread", "rye")} />
<button value="Wheat" onClick={() => this.updateSandwich("bread", "wheat")} />
<button value="Ham" onClick={() => this.updateSandwich("meat", "ham")} />
<button value="Turkey" onClick={() => this.updateSandwich("meat", "turkey")} />
}
}