Javascript 在react native中动态更改函数onPress处理程序_Javascript_React Native

Javascript 在react native中动态更改函数onPress处理程序

javascript react-native

Javascript 在react native中动态更改函数onPress处理程序,javascript,react-native,Javascript,React Native,是否有一种方法可以动态更改中的onPress函数处理程序？我有三个需要通过数组传递的onPress函数。如何动态更新传递给的函数或函数名（请参见下面的代码）我的输入阵列： const menu = [ { "id": 1, "route": "this.onBottonPressedHome.bind(this)", "info": "1" }, { "id": 2, "route": "this.onBottonPressedSettings.bind(this)

是否有一种方法可以动态更改

中的

onPress

函数处理程序？我有三个需要通过数组传递的

onPress

函数。如何动态更新传递给

的函数或函数名（请参见下面的代码）

我的输入阵列：

const menu = [
{
  "id": 1,
  "route": "this.onBottonPressedHome.bind(this)",
  "info": "1"
},
{
    "id": 2,
    "route": "this.onBottonPressedSettings.bind(this)",
    "info":"2"
},
{
    "id": 3,
    "route": this.onBottonPressedHistory.bind(this)",
    "info": "3"
}

]

我的公寓名单：

<FlatList
horizontal={true}
data={menu}
keyExtractor={item => item.id.toString()}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
    <TouchableOpacity
    onPress={item.route}
    >
        <Card>
            <CardItem style={{ backgroundColor: '#37BBE1'}}>
                <Body>
                    <View style={{ paddingTop: 10, width: 135 }}>
                        <Text style={{ fontSize: 12, textAlign:'justify', color: '#fff' }}>
                            {item.info}
                        </Text>
                    </View>
                </Body>
            </CardItem>
        </Card>
    </TouchableOpacity>

item.id.toString（）}
showshorizontalscrolindicator={false}
renderItem={（{item，index}）=>(
{item.info}

执行此操作时，会出现一个错误，指出数组中未定义

bind

。如何解决此问题

更新：

我使用三元运算符实现了这一点，好吗？这会在性能问题上产生任何问题吗？

如果我理解正确，您的

菜单

数组由具有字符串值字段的对象项组成（即没有“实”函数绑定）

假设这是一个必须处理的约束，您可能会考虑到这个问题的不同方法，而不是在呈现时动态传递<代码> OnPress < /COD>处理程序，而是在事件期间动态地解析处理程序，例如：

render() {

  /* This handler dynamically selects the action to call, based on the "item"
  that the user has pressed */
  const onPressItemHandler = (item) => {
    switch(item.id) {
      case 1: {
        this.onBottonPressedHome();
        break;
      }
      case 2: {
        this.onBottonPressedSettings();
        break;
      }
      case 3: {
        this.onBottonPressedHistory();
        break;
      }
    }
  }

  return <FlatList
  horizontal={true}
  data={menu}
  keyExtractor={item => item.id.toString()}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item, index }) => (
      <TouchableOpacity
      onPress={ () => onPressItemHandler(item) }>
          <Card>
              <CardItem style={{ backgroundColor: '#37BBE1'}}>
                  <Body>
                      <View style={{ paddingTop: 10, width: 135 }}>
                          <Text style={{ 
                             fontSize: 12, 
                             textAlign:'justify', 
                             color: '#fff' }}>
                              {item.info}
                          </Text>
                      </View>
                  </Body>
              </CardItem>
          </Card>
      </TouchableOpacity>)} />      
}

render（）{
/*此处理程序根据“项”动态选择要调用的操作
用户已按下的*/
const onPressItemHandler=（项目）=>{
开关（项目id）{
案例1：{
此.onBottonPressedHome（）；
打破
}
案例2：{
此.onBottonPressedSettings（）；
打破
}
案例3：{
此.onBottonPressedHistory（）；
打破
}
}
}
return item.id.toString（）}
showshorizontalscrolindicator={false}
renderItem={（{item，index}）=>(
onPressItemHandler（项目）}>
{item.info}
)} />      
}

它能工作，我试过使用三元运算符，它也能工作！但这有错吗？很好！三元运算符很好，但如果您有许多

id

案例需要考虑，它们可能会使代码更难阅读谢谢您的建议！