1
我已經在React上創建了一個遊戲，並且我正在嘗試將我的代碼調整爲React Native。其中之一是困擾我的一件事就是如何將這些三線平移，因爲在RN沒有DOM的解決方案依賴於：React Native-- onPress從「currentTarget」中提取id
handleClick(e) {
this.props.change(e.currentTarget.id);
}
這到底是怎麼發生的是一個無狀態的孩子收穫一個點擊的元素ID （currentTarget的），並用它來調用它在父級中定義的方法。然而，這種配方e.currentTarget.id在RN中不起作用。
在RN中有沒有雄辯的方式來重寫這一個班輪？
注意：有兩個問題模糊地類似於這個，here和here，但是答案看起來更像是補丁而不是結構優雅的解決方案。如果您知道某些事情，請發表一個答案。
編輯：看來，不能繞過ReactNativeComponentTree。
我有那麼多，但迄今爲止這還沒有工作：
handlePress(event) {
let number = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.id;
this.props.change(number);
}
第二個編輯：好吧，也許我應該加什麼，我想實現一個簡單的例子。當我點擊任何flatlist的元素時，它的id應該顯示在Child的底部。點擊重置將恢復默認狀態。
代碼下面簡單的例子中：
import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View, Button } from 'react-native';
import ReactNativeComponentTree from 'react-native';
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
quotes: ["a","bnaskdkahhahskkdk","c","d","e","a","b","c","d"],
size: [true, true, true, true, true, true, true, true, true],
color: [false, false, false, false, false, false, false, false, false],
progress: "me"
};
this.change = this.change.bind(this);
this.reset = this.reset.bind(this);
}
change(number) {
this.setState({color: [true, true, true, true, true, true, true, true, true], progress: number});
}
reset() {
this.setState({color: [false, false, false, false, false, false, false, false, false],
progress: "me"
});
}
render() {
return (
<View style={styles.container}>
<Child change={this.change} reset={this.reset} quotes={this.state.quotes}
size={this.state.size} color={this.state.color}
progress={this.state.progress} />
</View>
);
}
}
class Child extends Component {
constructor(props) {
super(props);
this.handlePress = this.handlePress.bind(this);
this.handleReset = this.handleReset.bind(this);
}
/*handlePress(e) {
let number = e.currentTarget.id;
this.props.change(number);
}*/
handlePress(event) {
let number = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.id;
this.props.change(number);
}
handleReset() {
this.props.reset();
}
render() {
let ar = [];
for (let i=0; i<this.props.quotes.length; i++) {
let b = {key: `${i}`, id: i,
classSize: this.props.size[i] ? (i%2===0 ? styles.size : styles.oddsize) : "",
classColor: this.props.color[i] ? (i%2===0 ? styles.color : styles.oddcolor) : ""}
ar.push(b);
}
return (
<View style={styles.container}>
<Button onPress={this.handleReset} title="Reset" />
<FlatList
data={
ar
}
renderItem={({item}) => <Text onPress={this.handlePress}
style={[item.classSize, item.classColor]}> {item.id+1}
{this.props.quotes[item.id]} </Text> }
/>
<Text style={styles.size}>{this.props.progress}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
//justifyContent: "center",
alignItems: "center",
paddingTop: 22,
//backgroundColor: "purple"
},
size: {
flex: 1,
padding: 10,
fontSize: 18,
backgroundColor: "grey",
margin: 1,
height: 44,
color: 'gold',
borderColor: "white",
borderWidth: "1",
textAlign: "center"
},
oddsize: {
flex: 1,
padding: 10,
fontSize: 18,
backgroundColor: "white",
margin: 1,
height: 44,
color: 'gold',
borderColor: "white",
borderWidth: "1",
textAlign: "center"
},
color: {
flex: 1,
padding: 10,
backgroundColor: 'grey',
//borderRadius: "25%",
margin: 1,
fontSize: 18,
height: 44,
color: 'pink',
borderColor: "red",
borderWidth: "1"
},
oddcolor: {
flex: 1,
padding: 10,
backgroundColor: 'white',
//borderRadius: "25%",
margin: 1,
fontSize: 18,
height: 44,
color: 'pink',
borderColor: "red",
borderWidth: "1"
}
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject',() => Parent);
@P。 Myer Nore：這正是你在https://stackoverflow.com/questions/2236747/use-of-the-javascript-bind-method中評論的內容。 – alexandros84
您不應該在'render'方法中使用JSX /中的bind或arrow函數。它們每次都會創建一個新的函數，這會導致組件被更改，導致組件每次都被重新渲染，這首先破壞了使用React的許多好處。然而，這個記錄極其糟糕。 – hippietrail