react-native - 如何在不使用作为道具接收的 onPress 的情况下调用某些函数

Question

<TouchableOpacity style={styles.clearButton} onPress={clear}>

我想使用clear独立分配给 onPress 的（它是一个从选择器字段中清除 selectedItem 的函数）函数。
例如在某些 if 条件下：

if(someCondition){
  // I want to use clear function here.
}

请告诉我我该怎么做。下面是完整的功能。

function renderField (settings) {
    const { getLabel, clear } = settings
     
     if(someCondition){
         // I want to use clear function here.
     }
    return (
            <View>
              
              <TouchableOpacity onPress={clear}>
                <Text>Clear</Text>
              </TouchableOpacity>
              
               <Text>{getLabel(selectedItem)}</Text>
            
            </View>
           )
 }

完整代码::

import * as React from 'react'
import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'

export default function Test() {
    const options = [
      {
        color: '#2660A4',
        label: 'One',
        value: 1
      },
      {
        color: '#FF6B35',
        label: 'Two',
        value: 2
      },
    ]
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
            <CustomPicker
                placeholder={'Please select your favorite item...'}
                options={options}
                getLabel={item => item.label}
                fieldTemplate={renderField}
                optionTemplate={renderOption}
                onValueChange={value => {
                    Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
                }}
            />
      </View>
    )

    function renderField (settings) {
    const { selectedItem, defaultText, getLabel, clear } = settings
    
    /* React.useEffect(() => {
        if (selectedItem) {
          return
        }
      
        clear()
      }, [selectedItem, clear]) */

    return (
        
      <View style={styles.container}>
        <View>
          {!selectedItem && <Text style={[styles.text, { color: 'red' }]}>{defaultText}</Text>}
          {selectedItem && (
            <View style={styles.innerContainer}>
              <TouchableOpacity style={styles.clearButton} onPress={clear}>
                <Text style={{ color: '#fff' }}>Clear</Text>
              </TouchableOpacity>
              <Text style={[styles.text, { color: selectedItem.color }]}>
                {getLabel(selectedItem)}
              </Text>
            </View>
          )}
        </View>
      </View>
    )
  }

  function renderOption(settings) {
    const { item, getLabel } = settings
    return (
      <View style={styles.optionContainer}>
        <View style={styles.innerContainer}>
          <View style={[styles.box, { backgroundColor: item.color }]} />
          <Text style={{ color: item.color, alignSelf: 'flex-start' }}>{getLabel(item)}</Text>
        </View>
      </View>
    )
  }
}

::参考::

**我的目标：** 我想根据某些条件将所选值更改为默认值，因为我正在实现两个自定义选择器，所以当第一个选择器中的值发生变化时，我想将第二个选择器的值设置为默认值。

Answer 1

你想产生副作用，

React.useEffect(() => {
  if (!someCondition) {
    return
  }

  clear()
}, [someCondition, clear])