使用Redux Toolkit进行受控输入

4dc9hkyq  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(142)

我一直在尝试找到一个解决方案,如何为不同的输入创建一个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'
      />
      ...
8hhllhi2

8hhllhi21#

您几乎就可以做到这一点了。您所需要做的就是将onChange中的事件设置为您的函数。
`

<input
        onChange={(e) => handleEducationChange(e)}
        value={el.course}
        className='form-input'
        type='text'
        name='course'
        placeholder='Course / Program'
      />

当你在函数参数中导入事件时,你可以使用e.target.value来获取用户输入到分派函数中。2参见处理函数的例子。

const handleEducationChange = (e) =>
    dispatch(updateEducation(e.target.value));

你的createslice需要从事件中获取输入并将其设置为redux状态。你的输入将是action对象内部的有效负载。你可以使用=来设置你想要的任何状态变量。

updateEducation: (state, action) => {
     state.course = action.payload
    }

这就完成了这个循环。总结: 1.确保从输入组件获取event.target.value,并将其传递给处理函数。 1.将event.target.value传递给调度操作。 1.使用createslice中的action.payload`设置状态。输入数据将存储在action. payload中。
祝你好运!

相关问题