我一直在尝试找到一个解决方案,如何为不同的输入创建一个onChange侦听器,然后将所有信息传递给单个RTK状态。
因此,基本上,侦听器必须从每个输入中收集信息,然后将其传递给数组中相应的对象键。
我的切片如下所示:
import { createSlice } from '@reduxjs/toolkit';
import uniqid from 'uniqid';
// State
const initialState = [
{
id: uniqid(),
course: '',
university: '',
fromEd: '',
toEd: '',
descriptionEd: '',
},
];
const educationSlice = createSlice({
name: 'education',
initialState,
reducers: {
addEducation: (state) => {
state.push({
id: uniqid(),
course: '',
university: '',
fromEd: '',
toEd: '',
descriptionEd: '',
});
},
removeEducation: (state, action) => {
state.splice(action.payload, 1);
},
updateEducation: (state, action) => {
------> ??? <-----
},
},
});
export default educationSlice.reducer;
export const { addEducation, removeEducation, updateEducation } =
educationSlice.actions;
我的组件如下所示:
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateEducation } from '../../features/educationSlice';
function Education() {
const education = useSelector((state) => state.education);
const dispatch = useDispatch();
const handleEducationChange = (???) =>
dispatch(updateEducation(???));
return education.map((el, index) => (
<span key={index}>
<h3 className='form-header'>Education</h3>
<input
onChange={handleEducationChange}
value={el.course}
className='form-input'
type='text'
name='course'
placeholder='Course / Program'
/>
<input
onChange={handleEducationChange}
value={el.university}
className='form-input'
type='text'
name='university'
placeholder='University'
/>
<input
onChange={handleEducationChange}
value={el.fromEd}
className='form-input'
type='text'
name='fromEd'
placeholder='Start Date'
/>
<input
onChange={handleEducationChange}
value={el.toEd}
className='form-input'
type='text'
name='toEd'
placeholder='End Date'
/>
<input
onChange={handleEducationChange}
value={el.descriptionEd}
className='form-input'
type='text'
name='descriptionEd'
placeholder='Description'
/>
...
1条答案
按热度按时间8hhllhi21#
您几乎就可以做到这一点了。您所需要做的就是将onChange中的事件设置为您的函数。
`
当你在函数参数中导入事件时,你可以使用e.target.value来获取用户输入到分派函数中。2参见处理函数的例子。
你的createslice需要从事件中获取输入并将其设置为redux状态。你的输入将是action对象内部的有效负载。你可以使用=来设置你想要的任何状态变量。
这就完成了这个循环。总结: 1.确保从输入组件获取
event.target.value,并将其传递给处理函数。 1.将
event.target.value传递给调度操作。 1.使用createslice中的
action.payload`设置状态。输入数据将存储在action. payload中。祝你好运!