Binding 使用参数响应本机onPress绑定

理想的行为是将一个参数（文本）传递给onClick处理程序，以便console.log它，但我似乎在语法上做了一些错误的事情

如果我把这个论点省略如下，它就可以正常工作了：

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

}

---

它也不起作用。

您可以使用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>
    );
  }
}

onPress（txt）{
console.log（txt）；
}
render（）{
返回(
####################
主画面
编号：{this.props.numbers}
this.onPress（'foo'）}>
去福
);
}
}

通过在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>
    );
  }

}

导出默认类导航扩展组件{
componentDidMount（）{
此.props.pickNumber（3）；
}
onPress（txt）{
console.log（txt）；//foo
}
render（）{
返回(
####################
主画面
编号：{this.props.numbers}
去福
);
}
}

第一个参数是“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>
    );
  }

}

导出默认类导航扩展组件{
componentDidMount（）{
此.props.pickNumber（3）；
}
onPress=（这个，txt）=>（）=>{
console.log（txt）；//foo
}
render（）{
返回(
####################
主画面
编号：{this.props.numbers}
去福
);
}
}

您也可以使用胖箭头来解决此问题：

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

导出默认类导航扩展组件{
手按=（文本）=>{
console.log（文本）；
}
render（）{
返回(
####################
主画面
编号：{this.props.numbers}
这个.handlePress（'weeeee'）}>
去福
);
}
}

在调用函数之前，只需传递一个胖箭头函数

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

试试这个

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

---

定义函数并在文本按下时调用它。若您在数组上迭代，那个么您也可以传递title

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

selectText=（项目）=>{
console.log（item）//将按打印文本
警报（项目）
}
返回(
点击此按钮。选择文本（“按下文本”）}>按可发出警报
}

它会删除错误，但“foo”字符串会自动被console.logged记录，我甚至没有单击。对不起，我已经更新了我的答案。您需要在此之前添加（）=>onPress（'foo'））。如果没有fat arrow函数，我们将执行一个函数，而不是给onPress一个函数，因此我们需要arrow函数为onPress创建一个函数。使用

onPress={（）=>}

时无需绑定该函数，因为它是自动完成的。使用fat arrow的原因如下：

this.onPress.bind（this）

返回绑定函数，并将其传递给

onPress

prop。但是，

this.onPress（'foo'））

如果没有胖箭头，将使用参数

foo

立即调用函数

onPress

。由于此函数不显式返回任何内容，

未定义的

将被返回，这是传递给

onPress

属性的内容。但是，

onPress

属性希望函数仅在用户单击后执行。

（）=>

创建（并返回）一种使用ES6语法的函数。从技术上讲，在这种情况下，

bind

完全没有必要，因为

onPress

函数中没有引用

this

。这种方法有效，但效率较低。只要点击该变量，就需要创建并执行该函数。如果使用函数definit离子，然后绑定，每当你点击时，函数只会被调用，而不是每次都被创建。非常方便，因为fat arrow函数会在react无法缓存时触发重新渲染。Lint不是这样的：这应该是首选答案，因为它避免了每次按下时创建一个新的匿名函数评分过高的答案将…不正确，

this.onPress.bind（this，'foo'）

。因此，此方法与胖箭头函数具有相同的效果。@FanchenBao，那么，您是如何修复它的？这绝对是最简单、最直接的答案谢谢！

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

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