How can I add property to an element so I can reach it via e.target.[name] in react-native?-CodePudding

So, I'm just playing with react-native to learn:

<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>

I got these badboys, instead of having four inline or outer functions for arithmetic operations, i wanted to do something like this:

const handleArithmetics = (e) => {
    switch (e.target.name) {
      case 'INCREMENT':
        break;
      case 'DECREMENT':
        break;
      default:
        break;
    }
  };

Remember this? I've done this a lot in react.js while web programming, say there's user related form.

setUser([e(which is just an html input element with name tag on it).target.name] = e.target.value)

how can I reach this on react-native, should I dive into the props into react library, or is there a way to accomplish?

CodePudding user response：

Unfortunately not, RN components do not have 'name' tags. There is a workaround if you assign testIDs:

      <Pressable testID='hi!!!!' onPress={(e) => console.log(e._targetInst.memoizedProps.testID)}>
        <View style={{ width: 40, height: 40, backgroundColor: '#faf' }} />
      </Pressable>

but this uses private React Native internals and I don't recommend this. You should probably do it the long way:

  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>

CodePudding user response：

so unlike web, you cant access it like that, what you can do is

<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>

So after this you can do something like

const handleArithmetics = (param) => {
    switch (param) {
      case 'inc':
        break;
      case 'dec':
        break;
      case 'mul':
        break;
      case 'div':
        break;
      default:
        break;
    }
  };

Thats it, it should do. Do lemme know in case of any doubts