【问题标题】:Is there a way to randomize the value in drop down picker with a click of a button?有没有办法通过单击按钮来随机化下拉选择器中的值?
【发布时间】:2022-11-12 11:00:30
【问题描述】:

我的页面中有这个下拉选择器,目前允许我根据我在 React Native Expo 中选择的内容将此值传递到下一页。我想知道我是否可以通过单击按钮在下拉选择器中随机化这个值?

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { auth } from '../firebase'
import { useNavigation } from '@react-navigation/core'
import { signOut } from 'firebase/auth'
import DropDownPicker from 'react-native-dropdown-picker'
import { useEffect, useState } from 'react'

const HomeScreen = () => {

  const navigation = useNavigation()

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
             {label: 'Japanese', value: 'J'},                  
             {label: 'Korean', value: 'K'},
             {label: 'Western', value: 'Western'},
             {label:'Indonesian', value:'I'},
             {label: 'Taiwan', value: 'T'},
             {label:'Chinese', value:'C'},
            ]);
  const handleSignOut = async () =>{
    try{
      await signOut(auth)
      console.log("Signed out successfully")
      navigation.replace("Login")
    }catch (error) {
      console.log({error});
   }
  }
  
  return (
    <View style = {styles.container}>
      <Text>Welcome {auth.currentUser?.email}</Text>
      <Text></Text>
      <Text>What cusine would you like to eat today?</Text>
      <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
    <TouchableOpacity
        onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Search</Text>
      </TouchableOpacity>

      <TouchableOpacity
      onPress={handleSignOut}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
    
  )
}

更新:调整了功能以及我如何放入按钮但它不起作用。我在这里做错了吗?还有我如何将此值传递给另一个页面?

const setRandomValue = (setValue, items) => {
    const randomIndex = Math.floor(Math.random() * items.length);
    setValue([items[randomIndex].label.toLowerCase()]);
    console.log(randomIndex)
    }

<TouchableOpacity
        onPress={setRandomValue}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Random</Text>
      </TouchableOpacity>

【问题讨论】:

    标签: javascript reactjs react-native


    【解决方案1】:

    你的意思是这样的?

    const setRandomValue = (setValue, items) => {
        const randomIndex = Math.floor(Math.random() * items.length);
        setValue([items[randomIndex].label.toLowerCase()]);
    }
    
    <button onClick={() => setRandomValue(setValue, items)}>random</button>
    

    【讨论】:

    • 不知道为什么我想传递这样的依赖项。这可能不是很地道。您也可以使该按钮成为组件或诸如此类的东西。关键是它应该可以工作,但要根据你的标准设计你的东西
    猜你喜欢
    • 2015-10-16
    • 1970-01-01
    • 2015-06-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-23
    • 2020-04-28
    相关资源
    最近更新 更多