Question

所需的行为是将参数（文本）传递给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>
    );
  }

}

但是，如果我想将参数传递给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')}

它也不起作用。

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

Answer 2

您可以通过在onPress值上绑定它并在'this'之后传递参数来避免在构造函数中绑定函数。构造函数模式很好但是我越是进入OO领域，感觉就越令人讨厌。您可以像这样重构代码，

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'，之后可以提供任何其他参数，这些参数将以相同的顺序接收。

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

Answer 4

在调用函数之前，只需传递一个粗箭头功能即可。

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

Answer 5

尝试

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

Answer 6

定义函数并在textPress上调用它。如果要遍历数组，则还可以传递标题

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

react-native onPress绑定参数

6 个答案: