输入文字-'defaultValue'未加载状态值,'value'不允许编辑

我的输入文本如下(MovieInput.tsx):

<input 
    id="inputMovieTitle" 
    type="text"
    onChange={ e => titleHandleChange(e) }
    value={ getTitle() }>
</input>

titleHandleChange:

const [title, setTitle] = useState('');

const titleHandleChange = (e: ChangeEvent<HTMLInputElement>) => {        
    setTitle(e.target.value);
}

getTitle:

const moviesInState = useSelector((state: any) => state.movies);

const getTitle = () => {      
    console.log(moviesInState.item.title); // It displays correct movie title from the store corresponding to the selected row
    return moviesInState.item.title;
}

我有一个表格(Grid.tsx),其中列出了该州的所有电影(state.movi​​es.items [])。当我单击该表中的任何电影行时,所选的电影将在商店(即state.movi​​es.item)中更新。

Grid.tsx:

const dispatch = useDispatch();

const selectMovie = (movie: Movie) => {
    const movieSelected: Movie = {
        _id: movie._id,
        __v: movie.__v,
        title: movie.title,
        rating: movie.rating,
        year: movie.year
    }
    dispatch(getMovie(movieSelected));
}
...
<tbody>
    {
        props.allMovies.map((movie: Movie) => 
            <tr onClick={() => selectMovie(movie)}>
                <td>{movie.title}</td>
                <td>{(+movie.rating).toFixed(1)}</td>
                <td>{movie.year}</td>
            </tr>
        )
    }
</tbody>

现在,当我单击表(Grid.tsx)中的任何行时,它将更新商店中的store.movi​​es.item,并且文本输入(在MovieInput.tsx中)将显示所选电影的标题。当我更改选定的行时,文本输入的值也会更新。

为什么要在文本输入中加载所选电影的标题文本?

因为,我应该能够编辑标题值并更新DB中的记录。我选择任何行,更改其标题,然后单击“更新”按钮并保存。但是,尽管在输入中成功填充了文本,并且在我们更改所选行时正确地进行了更改,但文本输入仍保持“不可编辑”状态。这是由于以下代码:

value={ getTitle() }>

当我按如下方式将'value'更改为'defaultValue'时,我可以编辑文本输入,但是这次,当我选择另一行时,文本值没有改变。

defaultValue={ getTitle() }>

它可以正常工作并显示更新的值(当我更改选定的行时),直到我编辑输入。首次编辑后,不会在另一行单击上更改其值。仅保留编辑后的文本,但是我希望在选择另一行时该值会发生变化。但是,getTitle()函数内部的控制台日志显示来自商店(store.movi​​es.item)的与选定行相对应的正确标题。

您能否让我知道如何执行以下操作?

  • 使文本输入可编辑
  • 使文本输入在更改所选行后更改其值(即使在编辑输入之前,输入也应丢失编辑并更改为新值)