簡體   English   中英

REACT NATIVE:如何獲取 TextInput 的值和 Picker 的值

[英]REACT NATIVE: How to get value of TextInput and value of Picker

我想獲取TextInputPicker的值並將其插入到我的Flatlist中。 我所做的方式我可以只插入TextInput的值,但沒有Picker ,或者我使用Picker但無法獲得TextInput的值。 這是我的代碼:

這些是 UseState

  const [selectedValue, setSelectedValue] = useState(' '); //for Picker
    const [text, setText] = useState(''); //for the TextInput
  <TextInput style={styles.input}
           placeholder="   Amount "
           keyboardType='numeric'
           onChangeText={text => setText(text)}
           value={text}
        />
  <Picker
              selectedValue={selectedValue}
              style={{ height: 50, width: 150 }}
              onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
               >  

              <Picker.Item label="Food" value="food" />
              <Picker.Item label="Transport" value="trans" />
                     </Picker>

這是我的 Button 和 Flatlist 代碼,邏輯是按下 Button 后它插入到我的Flatlist但我無法插入Picker and value of TextInput 的值```:

 <Button
          title="Save"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
          onPress={() => {if ( selectedValue)  setData([...data, { name: selectedValue  }]) 
          console.log('sec'); }} /> //here i could insert value of Picker and instead of ```selectedValue``` i can put text i will get value of TextINput , how to get both of them?

        <FlatList
          data={data}
          renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
          keyExtractor={(item, index) => index.toString()}  
           />

您在將數據添加到平面列表時忘記添加 textInput 的值。

<Button
  title="Save"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
  onPress={() => {
    // You forgot to add the value of textInput to the data
    if (selectedValue && text) setData([...data, { name: selectedValue, textInput: text }]);
    console.log("sec");
  }}
/>
<FlatList
  data={data}
  renderItem={({ item }) => <React.Fragment>
    <Text style={styles.item}> {item.name}</Text>
    // Displaying the data of textInput
    <Text style={styles.item}>{item.textInput}</Text>
    </React.Fragment>}
  keyExtractor={(item, index) => index.toString()}
/>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM