react-native onPress 与参数绑定答案

【问题标题】：react-native onPress binding with an argumentreact-native onPress 与参数绑定
【发布时间】：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 函数中引用。

标签： binding react-native

【解决方案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)}

【讨论】：