Question

我有一个渲染按钮的子组件。按下此按钮时，我想为按钮设置动画，同时更新父组件的状态，以便显示不同的视图。

如何从一个事件中完成这两项工作？我想调用单个函数/方法，但我不确定如何从方法中更新父状态 - 我只知道如何在render方法中的事件监听器上执行此操作。

继承孩子 -

return (
        <View>
             <View style={styles.switch}>
                 <TouchableHighlight onPress={this.props.buttonClick}>
                    <Animated.View
                        style={{
                          marginLeft,
                          height: 30,
                          width: 40,
                          backgroundColor: 'red'}} />
                 </TouchableHighlight>
              </View>              
        </View> 

    );
  }
}

Answer 1

将回调作为道具从父级传递给子级（看起来你已经在做了），但是在本地事件处理程序方法中将调用包装到其中，以执行您需要在子级中执行的任何操作同样，而不是直接在onPress

中引用回调

请注意在onButtonClick方法中使用箭头函数语法 - 这意味着您已经在类实例的范围内具有词法绑定this

SomeChild

onButtonClick = () => {
   // do whatever you need to get done in this child
   this.whatever()
   // call the parents callback to make it do whatever changes it needs 
   this.props.buttonClicked()
}

render () {
  return (
        <View>
             <View style={styles.switch}>
                 <TouchableHighlight onPress={this.onButtonClick}>
                    <Animated.View
                        style={{
                          marginLeft,
                          height: 30,
                          width: 40,
                          backgroundColor: 'red'}} />
                 </TouchableHighlight>
              </View>              
        </View> 

      );
    }
  }
}

父

onChildClickedCallbackMethod = () => {
  // do something with parent here...
}

render() {
   return <SomeChild buttonClicked={this.onChildClickedCallbackMethod} />
}

Answer 2

您可以通过props的形式将子回调从子回传给子组件。

单击该按钮，您可以先设置按钮的动画，一旦完成，您可以调用从父节点传递给子节点的回调。

或者，您可以先调用回调然后设置动画。这取决于您的要求以及您的代码如何运行。

How to update parent's state in React?

在React中，如何更新状态和从单个事件调用函数？

2 个答案: