Question

我终于开始使用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不再引用该类，并且我不知道如何绑定{{1 }}到this，因为它不是函数。

这是不可能吗？还是有另一种方式来处理我要达到的目标？

提前谢谢！

附加

如果我将handleStates移到handleStates上就可以了...怎么可能？

render()

Answer 1

首先，在第二个示例中，将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")} />
  }
}

React类：在对象的function属性中将类引用为“ this”

1 个答案: