web-dev-qa-db-ja.com

引数付きのreact-native onPressバインディング

望ましい動作は、console.logの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ハンドラに引数を渡したい場合は、「未定義のプロパティ「バインド」を読み取れません」というメッセージが表示されます。

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

それも機能しません。

bindingreact-native
39
Wasteland

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

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」であり、その後に同じ順序で受信される他の引数を指定できます。

25
GulshanZealous

太い矢印でも解決できます：

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

関数を呼び出す前に、太い矢印関数を1つ渡すだけです。

onPress= {()=> this.handlePress(param)}
7
Binova Gautam