Question

我是 React 的新手，我正在尝试做这个待办事项列表，但我在编辑功能方面遇到了问题。请有人帮助我吗？提前谢谢你:)

const ListItems = (props) => {
const [item, setItem] = useState('');

const handleChange = (e) => { 
setItem(e.target.value);
};
 
const handleRemoveItem = (e) => {
const id = e.target.getAttribute('id')
props.allItems(props.AllItems.filter(list => item.id!== id));
};

const editItem = (props, id) => {
props.setAllItems(
  props.allItems.map(item => {
    if(props.allItems.id=== id) {
      return {...item, id}
    }
    return id;
  }) 
  )
}
const displayTask = () => {
const test = props.toDoItems?.map((item) => 
  <div key={item.id}>
    <input key={item.id} readOnly value={item.title}    />
    <i className='fas fa-edit' onClick={editItem}/>
  </div>)
return test;
}

Answer 1

我对可能导致您的功能不起作用的原因有一些假设：

此外，您也没有调用函数 handleChange。
您正在不带参数地调用 editItem。所以试试：onClick={() => editItem(item.id)}。还要更改函数声明。
在您的地图中，您使用的是 item（witch 也是保存新标题的州名）。我会为 [itemTitle, setItemTitle] 重命名状态。
由于 allItems 是一个数组，因此您无法获得 props.allItems.id。在 else 中，您应该返回项目，不做任何更改。

所以，我认为你的意思是这样的：

const editItem = (id) => {
  props.setAllItems(
    props.allItems.map(item => {
      if(item.id === id)
        return {...item, title: itemTitle }
      else return item;
    })
  )
}

但还有一个问题：你的输入值设置为item.title，除非你改变数组allItems，否则它不会改变。我建议您更改 handleChange 中的 allItems (setAllItems)，从而关闭 editItem 函数。但是，如果您确实需要编辑按钮，请执行以下操作：

const [itemTitle, setItemTitle] = useState('');
const [currentId, setCurrentId] = useState('');

const handleChange = (e, id) => { 
  setItemTitle(e.target.value);
  setCurrentId(id)
};
// ...
<input
  key={item.id}
  value={item.id === currentId ? itemTitle : item.title}
  onChange={(e) => handleChange(e, item.id)} />

待办事项列表上的编辑功能

1 个答案: