Javascript 如何在react native中编辑平面列表项

本周我刚开始学习react native，在观看了一些长时间的youtube教程后，我决定创建一个待办事项列表应用程序，用户可以在其中添加、删除和编辑生成的待办事项列表。目前我的代码只能添加和删除，但我想知道如何将编辑功能添加到我的项目中，我不知道如何使其工作，因此，如果有人可以帮助我在这方面的想法，这将是了不起的

这是我的项目的代码沙盒

---

如果您有任何问题，请在评论中告诉我。要使其正常工作，您需要添加新的编辑处理程序，类似于

按处理程序，但需要编辑条目而不是删除条目。可能的编辑处理程序可能如下所示：

const editHandler = (todoKey, newText) => {
  const newTodos = [...todos];
  const index = newTodos.findIndex(todos => todos.key === todoKey);
  newTodos[index] = Object.assign(newTodos[index], { value: newText });

  setTodos(newTodos);
};

它会将已编辑的元素移动到列表的末尾。如果你愿意，你可以自己改变这种行为

然后您需要将处理程序传递给
：

类似地，我有条件地呈现“保存”和“编辑”按钮

完整的
组件：

const TodoItem = props => {
  const [text, setText] = useState("");
  const [isEditing, setEdit] = useState(false);

  const handleEdit = () => {
    props.editHandler(props.todoKey, text);
    setText("");
    setEdit(false);
  };

  return (
    <View style={styles.items}>
      <View style={styles.itemContainer}>
        {isEditing 
          ? <TextInput value={text} onChangeText={setText} style={styles.itemText} />
          : <Text style={styles.itemText}>{props.title}</Text>
        }
        <View style={styles.btnContainer}>
          <Buttons title="Delete" onPress={() => props.pressHandler(props.todoKey)} style={styles.itemBtn} />
          {isEditing 
            ? <Buttons title="Save" onPress={handleEdit} style={styles.editBtn} />
            : <Buttons title="Edit" onPress={() => setEdit(true)} style={styles.editBtn} />
          }
        </View>
      </View>
    </View>
  );
};

const styles = /* ... */

请在代码的工作示例中包含指向的链接。通常，您需要一个编辑回调处理程序，该处理程序获取要编辑的数据元素的索引或id（以便切换某些编辑视图）、编辑模式视图（即某些输入）以及一个保存编辑处理程序，以更新处于状态的数据中的该元素。请尝试在您的问题中包括一个代码示例，如果可能的话，包括一个正在运行的代码沙盒，并尽可能清楚地包含有关任何问题和预期结果的详细信息。祝你好运。@drewerese我刚刚添加了沙箱，我真的希望它能有所帮助，如果有，请告诉我issues@macborowy我刚刚添加了沙盒，我真的希望它能有所帮助，如果有任何问题请告诉我！所以在iEdit中，
？
意味着文本可以更改，因为有文本输入，
：
意味着不能编辑，因为只有文本对吗？对不起，我是个新手，这是第一周学习，我还有其他问题，为什么编辑的项目会移到最后？我只需要知道为什么
？
允许您编辑元素，因此如果
I编辑
为
真
React render
和
，否则。@JuanMartinZabala您是对的，在数组末尾添加项是不必要的。我添加这个是因为我无法使状态更新正常工作。我在尝试直接更新React中禁止的状态时出错。我已经用正确的代码更新了答案。嘿，麦克博罗尼！因此，基本上为了解决这个问题，您调用了TODO中的所有元素，然后添加了
.findIndex（todos=>todos.key==todoKey）
，将一个新值添加到索引中，最后使用
setTodos（newtodoos）将其应用到原始数组中
对吗？
{isEditing 
  ? <TextInput value={text} onChangeText={setText} style={styles.itemText} />
  : <Text style={styles.itemText}>{props.title}</Text>
}

const TodoItem = props => {
  const [text, setText] = useState("");
  const [isEditing, setEdit] = useState(false);

  const handleEdit = () => {
    props.editHandler(props.todoKey, text);
    setText("");
    setEdit(false);
  };

  return (
    <View style={styles.items}>
      <View style={styles.itemContainer}>
        {isEditing 
          ? <TextInput value={text} onChangeText={setText} style={styles.itemText} />
          : <Text style={styles.itemText}>{props.title}</Text>
        }
        <View style={styles.btnContainer}>
          <Buttons title="Delete" onPress={() => props.pressHandler(props.todoKey)} style={styles.itemBtn} />
          {isEditing 
            ? <Buttons title="Save" onPress={handleEdit} style={styles.editBtn} />
            : <Buttons title="Edit" onPress={() => setEdit(true)} style={styles.editBtn} />
          }
        </View>
      </View>
    </View>
  );
};

const styles = /* ... */

const TodoItem = props => {
  const [text, setText] = useState(props.title);
  const [isEditing, setEdit] = useState(false);

  const handleEdit = () => {
    props.editHandler(props.todoKey, text);
    setEdit(false);
  };

  return (
    {/* stays the same */}
  )
}