將一個事件從子元素傳遞給曾祖父

我剛剛熟悉React Native。使用這樣的設置，我能夠從一個孩子傳遞一個甚至達到其父：將一個事件從子元素傳遞給曾祖父

兒童：

<TouchableOpacity onPress={() => {this.props.click("Cool.")}}>

家長：

constructor(props) { 
    super(props); 
    this.click = this.click.bind(this) 
} 

click(c) { 
    console.log(c) // "Cool." 
} 

render() { 
    return (
    <View> 
     <Child click={this.click}> 
    </View> 
    } 
}

但是，如果我改變家長的迴歸：

<View> 
    <Child click={this.props.click}> 
</View>

然後用祖父組件：

<View> 
    <Parent click={this.click}> 
</View>

我沒有收到點擊事件，但出現錯誤"_this2.props.click is not a function"將子元素更改爲<TouchableOpacity onPress={this.props.click}>似乎阻止處理該事件。

最終，我想要一個子元素觸發一個事件處理程序在偉大的祖父級別修改在根級別的狀態，並向下級聯的變化。

來源

2017-09-11 arby

你在你父母的'click'函數中綁定了，但期望祖父知道它？如果你想在你的「祖父」中調用這個動作，那麼你應該在那裏綁定這個函數，並將它傳遞給下一代 – Nocebo

@Nocebo你可以擴展它嗎？在子組件上，我使用'onPress = {（）=> {this.props.click（「Cool。」）}}>'它通過this.props將事件傳遞給父項。然後，在父項中，我使用'click = {this.props.click}'，我認爲它會將它傳遞給另一代，然後我將有綁定的'click = {this.click.bind（this） }' – arby

哦，那麼你的描述有點混亂。你說「父母：」我現在認爲你的「父母組件」。但實際上，這實際上是您的「祖父母」，而「」是您實際的「父母」組件。您可能需要更改組件的標籤，然後:) – Nocebo

您可以使用ref訪問孩子的方法。你可以在here中看到這個文件。使用ref的一個簡單的例子是象下面這樣：

class Child extends Component { 
    open =() => { 
    this.props.setVisible(true) 
    } 

    render() { 
    <View ref={this.props.refFunc}> 
     ... 
    </View> 
    } 
} 

class Parent extends Component { 
    _ref = (e) => { this._child = e } 

    runFunction =() => { 
    this._child.open(); // you can use the open function of child here 
    } 

    render() { 
    ... 
    <Child refFunc={this._ref}> 
    ... 
    } 
}

而且當你要修改一個孩子家長，你應該定義一個函數，並把它傳遞到子組件作爲prop並使用它像一個事件onPress在子組件中。要做到這一點，示例代碼將如下所示：

class Parent extends Component { 
    state = {someState: value} 

    changeStateValue = (val) => { 
    this.setState({someState: val}) 
    } 

    render() { 
    ... 
    <Child changeState={this.changeStateValue}> 
    ... 
    } 
} 

class Child extends Component { 

    changeParentState = (val) =>() => { 
    this.props.changeState(val) 
    } 

    render() { 
    ... 
    <TouchableHighlight onPress={this.changeParentState(value)}> 
    ... 
    </TouchableHighlight> 
    ... 
    } 
}

以這種方式，您可以從子組件訪問父狀態。

來源

2017-09-11 08:10:43

這將允許我從父項使用子項的功能（例如打開），而我希望有一個子項修改父項的父項的父狀態收到像'onPress（）' – arby

事件我更新了我的答案。我希望它能幫助你。 –

這與我在第一個示例中使用的非常相似，將一個事件從一個孩子傳遞給父母。一旦我試圖傳遞給父母的父母（在父母父母的父母的路上），它不再執行。 – arby

將一個事件從子元素傳遞給曾祖父

回答

相關問題