Question

如何在不使用React Native中的'this'关键字的情况下访问元素的属性？我有一个函数，父类本身被绑定为'this'但我想访问被单击的元素的属性。这是代码 -

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)}/>
   );
 }
}

Answer 1

试试这个

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}/>

   );
 }
}

Answer 2

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

并以 -

的形式访问属性

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

Answer 3

很抱歉留下答案，但我不能发表评论，因为＆lt; 50 rep。

您应该使用以下位编辑答案的改进部分：

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

而不是你现在拥有的，

{{1}}

因为抛出错误（尝试导入未知模块）。

Answer 4

访问事件中组件属性的更好方法实际上是创建一个组件并将其传递给所需的数据：

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的事件处理程序的性能提示：

我们通常建议在构造函数中使用绑定或使用属性初始化程序语法来避免此类性能问题。（即每次组件渲染时避免创建回调）

参考：React Handling Events

（归功于https://stackoverflow.com/a/42125039/1152843）

Answer 5

您可以将事件处理程序更改为咖喱函数，如下所示：

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

 //Use ES6 arrow and avoid this.bind
 //Curried function handleTouch accepts cx, cy as extra parameters
 handleTouch = (cx, cy) => event => {
   console.log(cx, cy) // This is how you access props passed to Circle here
   console.log(event)
   this.setState({ activeX: cx });
 }

 render() {

   //You are actually invoking the handleTouch function here, whose return value is
   //a function, which is set as the onPress event handler for the <Circle> component
   return (
     <Circle cx='10' cy='10' r='5' onPress={this.handleTouch(10, 10)}/>
     <Circle cx='20' cy='20' r='5' onPress={this.handleTouch.(20, 20)}/>
   );
 }
}

查看以下工作小吃：

https://snack.expo.io/@prashand/accessing-props-from-react-native-touch-event

如何在Click事件中获取React Native中的Element属性

5 个答案: