如何解决我不知道如何在React中使用映射功能来编辑数组项
所以我一直在努力解决以下问题:
movies [
{
id: 1,name: 'Alpha',rating: 0
},{
id: 2,name: 'Bravo',{
id: 3,name: 'Charlie',rating: 0
}
]
我已经有办法向该数组添加电影或从中删除电影,但是我想为每个项目都有一个输入部分,其中评级状态将更新为输入值。我一直在使用'useReducer'来解决这个问题,但我想我只是不确定语法/有效载荷是什么?
我知道有一种方法可以制作movie.map(movie => {etc.etc。},但我似乎无法弄清楚。非常感谢您的帮助。
编辑:
<div>
{movies.map(movie => (
<h1>{movie.name}</h1>
<input placeholder={movie.rating}
onChange={//I WANT THE MOVIE.RATING TO CHANGE ON INPUT CHANGE//}
/>
))}
</div>
我希望输出看起来像这样,其中{movie.rating}对象的状态在输入更改时进行更新
解决方法
如果您将电影用作组件状态,则可以将其传递给onChange
函数:
const updateRatingOnly = (id,rating) => {
movies = movies.map(movie => {
if(movie.id === id){
return{...movie,rating}
}
return movie
})
setMovies(movies)
//or
this.setState({movies})
}
,
您可以通过将功能与事件链接在一起来轻松实现此目的。因此,您的事件处理程序将如下所示:
const handleRatingChange = (movie) => ({target: {value}) => {
//useReducer logic
//movie = movie name
//value = new rating
};
<div>
{movies.map(movie => (
<h1>{movie.name}</h1>
<input placeholder={movie.rating}
onChange={handleRatingChange(movie.name)}
/>
))}
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。