获取事件值后删除数组项答案

【问题标题】：Remove Item of array after getting event value获取事件值后删除数组项
【发布时间】：2022-10-01 10:54:58
【问题描述】：

我想要得到的是，我想在选择项目后隐藏或删除项目并移动到另一个具有事件值的数组，所以，当我将 item-1 移动到 placeholder-2 时，它会像应从 placeholder-1 中删除，反之亦然。

就像这里显示的一样：

这就是我所拥有的：


const words = [
  { id: 1, word: \'item-1\' },
 {...}
];

const HomeScreen = () => {
  const [selectedWord, setSelectedWord] = useState([]);
  const [moveSelectedWord, setMoveSelectedWord] = useState([]);

  const handleSelected = (e) => {
    setSelectedWord(e._dispatchInstances.memoizedProps.children);
    setMoveSelectedWord((currentWord) => [...currentWord, selectedWord]);

  };

  const deleteWord = (selectedItem) => {
    setMoveSelectedWord((words) =>
      words.filter((item) => item !== selectedItem)
    );
  };

  return (
    <View
          {moveSelectedWord.map(
            (item) =>
              item.length > 0 && (
                <Text onPress={() => deleteWord(item)} style={styles.text}>
                  {item}
                </Text>
              )
          )}
      </View>
      <View
        style={{
          flexDirection: \'row\',
          flexWrap: \'wrap\',
        }}
      >
        {words.map((word, i) => (
          <View
            key={i}
            style={[
              styles.text,
              word.word === selectedWord
                ? styles.hideSelectedText
                : styles.showSelectedText,
            ]}
          >
            <Text onPress={handleSelected}>{word.word}</Text>
          </View>
        ))}
  );
};

如您所见，我试图用样式条件隐藏它，但它无法正常工作

你想用e._dispatchInstances.memoizedProps.children 做什么？
获取映射的 <Text/> 值

标签： arrays react-native

【解决方案1】：

我对 React-Native 不是最熟悉的，但这就是你使用 React 的方式。

import React from 'react';
import './App.css';

const DEFAULT_WORDS = [
    {id: 1, word: 'item-1'},
    {id: 2, word: 'item-2'},
    ...
];

function App() {
    const [words, setWords] = React.useState(DEFAULT_WORDS);
    const setIsSelected = (id, value) => {
        setWords(currentList => {

            return currentList.map((word) => {
                if (id === word.id) {
                    word.isSelected = value;

                }

                return word;
            })
        });
    }
    const MyButton = ({children, isHidden, onClick}) => {

        const style = {
            // opacity: isHidden ? 0 : 1, // Uncomment if you want a placeholder when button is hidden
            // display: isHidden ? "none" : "initial" // Uncomment if you don't want a placeholder 
        }

        return (
            <button 
                onClick={onClick} 
                disabled={isHidden} // Make sure you disable when hidden or transparent for screen readers
                style={style}
            >
                {children}
            </button>
        )

    }

    const selectedWords = words
        .map((word) => (
            <MyButton
                key={word.id}
                word={word}
                isHidden={!word.isSelected}
                onClick={() => setIsSelected(word.id, false)}
            >
                {word.word}
            </MyButton>
        ));

    const unselectedWords = words
        .map((word) => (
            <MyButton
                key={word.id}
                word={word}
                isHidden={word.isSelected}
                onClick={() => setIsSelected(word.id, true)}
            >
                {word.word}
            </MyButton>
        ));

    return (
        <div className="App">
            <div style={{ backgroundColor: "blue" }} >
                {selectedWords}
            </div>

            <div style={{ backgroundColor: "red" }} >
                {unselectedWords}
            </div>
        </div>
    );
}

export default App;

我不确定您在单击项目时是否需要占位符，但我已经向您展示了如何使用和不使用：

带占位符

const style = {
    opacity: isHidden ? 0 : 1
}

点击item-2后
点击 item-2、item-4、item-12 后

没有占位符
const style = {
    display: isHidden ? "none" : "initial"
}
点击item-2后

点击 item-2、item-4、item-12 后

【讨论】：