Entonces, solo estoy jugando con react-native para aprender:
<TouchableOpacity style={styles.touchables} onPress={handleArithmetic}> <Text style={{ color: 'white' }}> Increase by 1</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={handleArithmetic}> <Text style={{ color: 'white' }}> Decrement by 1</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={handleArithmetic}> <Text style={{ color: 'white' }}> Multiple by 4</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={handleArithmetic}> <Text style={{ color: 'white' }}> Divide by 4</Text> </TouchableOpacity>Obtuve estos chicos malos, en lugar de tener cuatro funciones en línea o externas para operaciones aritméticas, quería hacer algo como esto:
const handleArithmetics = (e) => { switch (e.target.name) { case 'INCREMENT': break; case 'DECREMENT': break; default: break; } };¿Recuerda esto? He hecho esto mucho en react.js mientras programaba web, digamos que hay un formulario relacionado con el usuario.
setUser([e(which is just an html input element with name tag on it).target.name] = e.target.value)¿Cómo puedo llegar a esto en react-native? ¿Debería sumergirme en los accesorios en la biblioteca de reacción o hay alguna manera de lograrlo?
Desafortunadamente no, los componentes de RN no tienen etiquetas de 'nombre'. Hay una solución si asigna testID s:
<Pressable testID='hi!!!!' onPress={(e) => console.log(e._targetInst.memoizedProps.testID)}> <View style={{ width: 40, height: 40, backgroundColor: '#faf' }} /> </Pressable>pero esto usa componentes internos privados de React Native y no lo recomiendo. Probablemente deberías hacerlo de la manera más larga:
const [counter, setCounter] = useState(0); const handleArithmetics = (amountToAdd) => { setCounter(counter => counter + amountToAdd); }; ... <TouchableOpacity style={styles.touchables} onPress={() => handleArithmetic(1)}> <Text style={{ color: 'white' }}>Increment by 1</Text> </TouchableOpacity>así que a diferencia de la web, no puedes acceder a ella así, lo que puedes hacer es
<TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("inc")}> <Text style={{ color: 'white' }}> Increase by 1</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("dec")}> <Text style={{ color: 'white' }}> Decrement by 1</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("mul")}> <Text style={{ color: 'white' }}> Multiple by 4</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchables} onPress={() =>handleArithmetic("div")}> <Text style={{ color: 'white' }}> Divide by 4</Text> </TouchableOpacity>Entonces, después de esto, puedes hacer algo como
const handleArithmetics = (param) => { switch (param) { case 'inc': break; case 'dec': break; case 'mul': break; case 'div': break; default: break; } };Eso es todo, debería hacer. Déjame saber en caso de cualquier duda.