如何将属性添加到元素，以便我可以通过 e.target.[name] 在 react-native 中访问它？

Question

所以，我只是在玩react-native来学习：

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

我得到了这些 badboys，而不是有四个用于算术运算的内联或外部函数，我想做这样的事情：

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

还记得这个吗？我在 react.js 进行网络编程时经常这样做，比如说有用户相关的表格。

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

我怎样才能在 react-native 上实现这个，我应该深入研究 react 库的道具，还是有办法完成？

Answer 1

很遗憾，RN 组件没有 'name' 标签。如果您分配 testIDs:

则有一个解决方法

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

但这使用了私有的 React Native 内部结构，我不推荐这样做。你应该从长远来看：

  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>

Answer 2

所以不像网络，你不能那样访问它，你可以做的是

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

所以在这之后你可以做类似的事情

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

就是这样，应该可以。如果有任何疑问，请告诉我

如何将属性添加到元素，以便我可以通过 e.target.[name] 在 react-native 中访问它？

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

javascript

mobile

reactjs

react-native

如何将 属性 添加到元素，以便我可以通过 e.target.[name] 在 react-native 中访问它？

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

javascript

mobile

reactjs

react-native

如何将属性添加到元素，以便我可以通过 e.target.[name] 在 react-native 中访问它？