react-native onPress 与参数绑定

Posted 2023-02-23

【中文标题】react-native onPress 与参数绑定

【英文标题】：react-native onPress binding with an argument

【发布时间】：2017-08-18 11:20:24

【问题描述】：

所需的行为是将参数（文本）传递给 onClick 处理程序以对其进行控制台记录，但似乎我的语法有问题。

如果我将论点如下所示，它可以正常工作：

export default class Nav extends Component 
  componentDidMount() 
    this.props.pickNumber(3);
  

  onPress() 
    console.log('FOOOBAAR');
  
  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=this.onPress.bind(this)>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  

但是，如果我想将参数传递给 onPress 处理程序，它会抱怨“无法读取未定义的属性 'bind'。

export default class Nav extends Component 
  componentDidMount() 
    this.props.pickNumber(3);
  

  onPress(txt) 
    console.log(txt);
  
  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=this.onPress('foo').bind(this)>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  

谢谢

补充： 如果我将其更改为：

onPress=this.onPress.bind('foo')

它也不起作用。

【问题讨论】：

顺便说一句，从技术上讲，bind 在这种情况下根本不需要，因为 this 没有在 onPress 函数中引用。

【参考方案1】：

您可以使用 ES6 在构造函数中进行绑定：

export default class Nav extends Component 
  constructor(props) 
    super(props);

    this.onPress = this.onPress.bind(this);
  

然后

  onPress(txt) 
    console.log(txt);
  

  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=() => this.onPress('foo')>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  

【讨论】：

它消除了错误，但 'foo' 字符串会自动被控制台记录下来，我什至没有点击。

对不起，我已经更新了我的答案。您需要在 this.onPress('foo') 之前添加 () =>。

没有胖箭头函数，我们是在执行一个函数而不是给onPress一个函数，所以我们需要箭头函数来为onPress创建一个函数。

使用onPress=() => 时不需要绑定函数，因为它是自动完成的

使用粗箭头的原因如下：this.onPress.bind(this) 返回绑定函数，并将其传递给 onPress 属性。但是，不带粗箭头的this.onPress('foo') 将立即使用参数foo 调用函数onPress。由于这个函数没有明确返回任何东西，undefined 被返回，这就是传递给 onPress 属性的东西。但是，onPress 属性期望函数仅在用户单击后执行。 () => 使用 ES6 语法创建（并返回）一个函数。

【参考方案2】：

您可以通过在 onPress 值处绑定函数并在“this”之后传递参数来避免在构造函数中绑定函数。你可以像这样重构你的代码，

export default class Nav extends Component 
  componentDidMount() 
    this.props.pickNumber(3);
  

  onPress(txt) 
    console.log(txt);  // foo
  
  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=this.onPress.bind(this,'foo')>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  

第一个参数是“this”，任何其他参数都可以在之后提供，这些参数将以相同的顺序接收。

更新：也可以使用闭包来做到这一点。

export default class Nav extends Component 
  componentDidMount() 
    this.props.pickNumber(3);
  

  onPress = (this, txt) => () => 
    console.log(txt);  // foo
  

  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=this.onPress(this,'foo')>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  

【讨论】：

确实非常方便，因为胖箭头函数会触发重新渲染，因为 react 无法缓存它

eslint 不太喜欢这样：github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…

这应该是首选答案，因为它避免了每次按下都创建一个新的匿名函数，因为评分最高的答案会这样做......

不正确，this.onPress.bind(this, 'foo')still leads to re-render。所以这个方法和胖箭头函数的效果是一样的。

@FanchenBao 所以，你是怎么解决的？

【参考方案3】：

你也可以用粗箭头解决它：

export default class Nav extends Component 

  handlePress = (text) => 
    console.log(text);
  

  render() 
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: this.props.numbers</Text>
        <TouchableHighlight onPress=() => this.handlePress('weeeeee')>
          <Text>Go to Foo</Text>
      </TouchableHighlight>
    </View>
    );
  

【讨论】：

此方法有效，但效率较低。每当您点击该变量时，都需要创建该函数，然后执行该函数。如果你使用函数定义，然后绑定，每当你点击时，函数只会被调用，而不是每次都创建。

【参考方案4】：

在调用函数之前，您应该只传递一个粗箭头函数。

onPress= ()=> this.handlePress(param)

【讨论】：

这是最简单直接的答案，谢谢！

【参考方案5】：

定义函数并调用它 onPress of Text。如果你正在迭代数组，那么你也可以传递标题

  selectText = (item) => 
            console.log(item) // will print Text Pressed
            alert(item)
      
   return(
       <View>
       <Text onPress = ()=>this.selectText("Text Pressed")>Press for Alert</Text>
       </View>
    

【参考方案6】：

试试这个

const onChangeHandler = index =>  console.log(index) 
onPress=onChangeHandler.bind(this, index)