代码之家 › 专栏 › 技术社区 › Bomber

按条件渲染可触摸突出显示

react-native reactjs

Bomber · 技术社区 · 6 年前

我试图有条件地呈现 onPress ,如果描述属性为 undefined ,我想要任何 印刷机 功能。不管怎样,我的onpress都会触发,如果描述未定义,我如何删除它

constructor(props) {
    super(props);

    this._onPressButton = this._onPressButton.bind(this);
}

_onPressButton(event) {
    Alert.alert(event.description);
}

render() {
    const { start, end, summary, description } = this.props;

    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? null : this._onPressButton;
            }}

        >

3 回复 | 直到 6 年前

Nitish 6 年前

你可以像下面那样做,也可以禁用

constructor(props) {
    super(props);

    this._onPressButton = this._onPressButton.bind(this);
}

_onPressButton(event) {
    Alert.alert(event.description);
}

render() {
    const { start, end, summary, description } = this.props;

    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? { } : this._onPressButton; // You can add { } instead of null
            }}
           disabled={description === ""} // Or you can just disabled conditionally 

        >

Andrew 6 年前

你可以使用 disabled 支柱。如果为真,则将禁用TouchableHighlight

像这样的东西

 <TouchableHighlight
  onPress={() => {
    this._onPressButton;
  }}
  disabled={description === ''}
 >

TouchableHighlight与TouchableWithOutFeedback具有相同的属性

https://facebook.github.io/react-native/docs/touchablewithoutfeedback#disabled

Treycos 6 年前

您使用的条件将始终返回 false 因为空字符串未定义:

console.log(undefined == "")

这种行为非常奇怪,因为您的函数甚至没有在arrow函数中返回。

下面应该通过放置一个不做任何事情的函数来完成这个技巧:

onPress={description ? this._onPressButton : x => {} }

如果出现以下情况,也可以使用内联:

onPress={description && this._onPressButton }

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前