首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
华为云
V2EX  ›  React

React 通过 props 传递函数的问题

  •  
  •   Oathbinder · 258 天前 · 1577 次点击
    这是一个创建于 258 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 事件触发,是因为这个原因吗?

    7 回复  |  直到 2018-02-02 21:28:03 +08:00
        1
    swirling   258 天前 via iPhone
    我觉得应该是 a 报错 b 不报错才对吧
        2
    50480350   258 天前
    this.handleClick = this.handleClick.bind(this);
        3
    brickyang   258 天前 via iPhone
    你在 childA 的 constructor() 里加上 this.foo = this.foo.bind(this) 试试
        4
    brickyang   258 天前 via iPhone
    噢噢,眼花了,在 childB 的 constructor 里给 handleClick bind this 试试
        5
    Oathbinder   258 天前
    @50480350 @brickyang
    绑定之后还是一样的错误,而且根据 React 的文档,如果使用箭头函数就不需要绑定了
        6
    Mullvinn   258 天前
    跑了一下贴出来的代码,没发现报错,看看是不是其他哪里有问题
        7
    yacolinqi   258 天前 via Android
    断点调试一下呗,或者在 handleClick 打印一下看看呗
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3510 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 18ms · UTC 02:05 · PVG 10:05 · LAX 19:05 · JFK 22:05
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1