Question

所以我有这个待办事项清单应用程序，并且我正在编辑待办事项的名称。

当我单击按钮@Override public void onResponse(Call<Animal> call, Response<Animal> response) { if(response.isSuccessful()){ for(int i=0 ; i<50 ; i++){ //names has to be of type String names.add(response.body().getMessage()) } RecyclerView recyclerView = rootView.findViewById(R.id.recycler_view); RecyclerViewAdapter rAdapter = new RecyclerViewAdapter(names, this); recyclerView.setLayoutManager(new LinearLayoutManager(getContext())); recyclerView.setAdapter(rAdapter); }时，我会在输入字段中获得名称的值，并且当我在该字段中键入内容并按Enter时，它应该更改/更新待办事项的名称，但是现在它只是添加新的待办事项。

这是到目前为止我可以使用的代码，我删除了所有失败的尝试。我没有其他想法了。

edit

编辑

此外，还可以添加新按钮以进行提交编辑，而不是按Enter键。

Answer 1

即使您在单击编辑按钮时用待办事项名称填充输入，但最终onSubmit会调用handleSubmit函数，该函数会调用ADD_TODO减速器。 / p>

您可以做的一件事是设置一个“编辑模式”标志，并更改handleSubmit的调度方式，并使用索引创建一个新的类型，例如UPDATE_TODO。或者将其设为新功能，然后根据更新标志调用相应的功能，如下所示：

<form onSubmit={editMode ? handleEdit : handleSubmit}>

Answer 2

您必须跟踪要编辑的ID /索引，以便可以确定是在状态更新还是在增加值。以下代码可能会有所帮助。我还是删除了打字稿。

function App() {

  const inputRef = React.useRef(null)
  const [editingIndex, setEditingIndex] = React.useState(null)

  const handleSubmit = (e) => {
    e.preventDefault()
    if(inputRef.current && inputRef.current.value !== ""){
      dispatch({ type: 'ADD_TODO', payload: inputRef.current.value, id: editingIndex})
    }
    inputRef.current && (inputRef.current.value = "")
  }

  const [todo, dispatch] = React.useReducer((state, action) => {
    switch (action.type) {
      case 'ADD_TODO':
        setEditingIndex(null)
        const tempState = [...state]
        if(action.id){
          tempState[action.id] = { ...tempState[action.id], name: action.payload }
        }
        else{
          tempState.push({ id: action.id || state.length, name: action.payload, isCheck: false })
        }
        return tempState
      case 'CHECK_TODO':
        return state.filter((item, index) => {
          if (index === action.id) {
            item.isCheck = !item.isCheck
          }
          return item
        })
      case 'DELETE_TODO':
        return state.filter((item, index) => index !== action.id)
      case 'EDIT_TODO':
        inputRef.current.focus()
        inputRef.current.value = action.payload
        return state
    }
  }, [])

  const todos = todo.map((item, index) => {
    return (
      <li key={index}>
        <input type="checkbox" checked={item.isCheck} onChange={() => dispatch({ type: "CHECK_TODO", id: index })} />
        {item.name}
        <button onClick={() => {setEditingIndex(index); dispatch({ type: 'EDIT_TODO', id: index, payload: item.name })}}>edit</button>
        <button onClick={() => dispatch({ type: "DELETE_TODO", id: index })}>x</button>
      </li>
    )
  })

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder='Buy milk'
          ref={inputRef}
        />
      </form>
      <ul>{todos}</ul>
    </div>
  )
}

ReactDOM.render(
    <App />,
  document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何在数组中编辑对象（待办事项）？（reactjs）

2 个答案:

如何在数组中编辑对象（待办事项）？ （reactjs）

2 个答案:

如何在数组中编辑对象（待办事项）？（reactjs）