React 通过 props 传递函数的问题

[Oathbinder]

class Parent extends Component {
    constructor(props) {
    	super(props);
    	this.state = { "id": "1" };
    }
    
    setIdFromChildA = (id) => this.setState({ "id": id });
    setIdFromChildB = (id) => this.setState({ "id": id });
    
    render() {
    	return (
    	    <ChildA id={this.state.id} setId={this.setIdFromChildA} />
    	    <ChildB id={this.state.id} setId={this.setIdFromChildB} />
        );
    }
}

class ChildA extends Component {
	constructor(props) {
    	super(props);
    	this.state = {...};
    }
    
    componentDidMount() {
    	this.foo()
    }
    
    foo() {
    	this.props.setId("2");
    }
}

class ChildB extends Component {
    constructor(props) {
    	super(props);
    	this.state = {...};
    }
    
    handleClick = (e) => {this.props.setId("2")};
    
    render() {
    	return (
            <button type="button" onClick={this.handleClick} />
    	);
}

现在的问题是 ChildA 调用 setId 没有问题但是 ChildB 在调用时会报错TypeError: _this.props.setId is not a function。A 和 B 的区别在于一个是在componentDidMount()中执行另一个是 onClick 事件触发，是因为这个原因吗？

[swirling]

我觉得应该是 a 报错 b 不报错才对吧

[50480350]

this.handleClick = this.handleClick.bind(this);

[brickyang]

你在 childA 的 constructor() 里加上 this.foo = this.foo.bind(this) 试试

[brickyang]

噢噢，眼花了，在 childB 的 constructor 里给 handleClick bind this 试试

[Oathbinder]

@50480350 @brickyang
绑定之后还是一样的错误，而且根据 React 的文档，如果使用箭头函数就不需要绑定了

[Mullvinn]

跑了一下贴出来的代码，没发现报错，看看是不是其他哪里有问题

[yacolinqi]

断点调试一下呗，或者在 handleClick 打印一下看看呗