如何在Click事件中獲取React Native中的元素屬性

如何在不使用React Native中的'this'關鍵字的情況下訪問元素的屬性？我有一個函數，它的父類本身綁定爲「this」，但我想訪問被單擊的元素的屬性。這裏的代碼 -如何在Click事件中獲取React Native中的元素屬性

import {Circle} from 'react-native-svg'; 
export default App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {activeX: null} 
} 

handleTouch(event) { 
    const x = event.target.cx; //How to access "cx" property here? 
    this.setState({ activeX: x }); 
} 

render() { 
    return (
    <Circle cx='10' cy='10' r='5' onPress={this.handleTouch.bind(this)}/> 
    <Circle cx='20' cy='20' r='5' onPress={this.handleTouch.bind(this)}/> 
    ); 
} 
}

來源

2017-06-16 Utkarsh Sah

import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';

和訪問性能原樣

const x = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.props.cx;

來源

2017-06-17 05:28:50

這看起來很亂。 React是否在某處記錄/推薦/背書？ – hippietrail

它似乎在最新版本中被更改。 'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree' - >'react-native/Libraries/Renderer/shims/ReactNativeComponentTree'，'._currentElement.props' - >'.memoizedProps' – mpyw

@hippietrail這是hacky **非常慢**。我們最好避免這個提示。 – mpyw

試試這個

import {Circle} from 'react-native-svg'; 
 
export default App extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    activeX: null, 
 
    cx: 10 
 
    } 
 
} 
 

 
handleTouch =() => { 
 
    const x = this.state.cx 
 
    this.setState({ activeX: x }); 
 
} 
 

 
render() { 
 
    return (
 
    <Circle cx={this.state.cx} cy='10' r='5' onPress={this.handleTouch}/> 
 

 
    ); 
 
} 
 
}

來源

2017-06-16 09:00:03 Kawatare267

對CX屬性是不固定的，它不能在該狀態下所定義。實際上activeX存儲被點擊的圓心的x座標。就像在HTML中一樣，我們使用'event.target.id'來提取點擊元素的ID。同樣，我應該如何在這裏使用事件對象訪問'cx'道具？ –

對不起，留下一個答案，但我自< 50代表不能發表評論

您應該編輯你的答案的改進部分，具有下列位：由於拋出一個錯誤

import ReactNativeComponentTree from 'react-native';

，而不是你有什麼，現在，

import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';

（試圖進口未知模塊）。

來源

2017-08-16 07:36:23 alexandros84

在事件訪問所述組件的屬性的一種更好的方法實際上是通過創建一個組件，它傳遞所需要的數據：

import { Circle } from 'react-native-svg'; 

class TouchableCircle extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.circlePressed = this.circlePressed.bind(this); 
    } 

    circlePressed(){ 
    this.props.onPress(this.props.cx); 
    } 

    render() { 
    return (
     <Circle cx={this.props.cx} cy={this.props.cy} r={this.props.r} onPress={this.circlePressed}/> 
    ); 
    } 
} 

export default App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = {activeX: null} 
    this.handleTouch = this.handleTouch.bind(this); 
} 

handleTouch(cx) { 
    this.setState({ activeX: cx }); 
} 

render() { 
    return (
    <TouchableCircle cx='10' cy='10' r='5' onPress={this.handleTouch}/> 
    <TouchableCircle cx='20' cy='20' r='5' onPress={this.handleTouch}/> 
    ); 
} 
}

NB：性能提示來自Facebook事件處理程序：

我們通常建議在構造函數中綁定或使用屬性初始值設定項語法來避免此類性能問題。（即，以避免回調的創建每次一個組件呈現）

REF：React Handling Events

（學分https://stackoverflow.com/a/42125039/1152843）

來源

2017-08-30 01:29:31 Florent

如何在Click事件中獲取React Native中的元素屬性

回答

相關問題