如何从子组件仅更改状态的一部分反应钩子

悉达特·瓦尔玛

我的父组件拥有这样的状态

 const [formData,setFormData]=useState({
        Basics:{
            job_title:'',
            job_type:null,
            ppo:true,
            emp_type:null,
            start_date_month:null,
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
        Details:{},
        Preferences:{},
        Colleges:{}
    })

Basics将整个状态对象作为道具传递给子组件。但是,我只希望子组件具有更改Basics对象的能力,而不是更改整个状态的能力,如果我直接传递该子组件是不可能的setFormData

<Basics state={formData.Basics} setState={setFormData}/>

有没有办法我只能将一部分传递setFormData给孩子,以便它不能修改的其他属性formData

Shubham Verma

当然。这里以useReducer为例:

import React from 'react';

const intialList = {
        Basics:{
            job_title:'',
            job_type:null,
            ppo:true,
            emp_type:null,
            start_date_month:null,
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
        Details:{},
        Preferences:{},
        Colleges:{}
    }
const formReducer = (state,action) => {
    switch (action.type) {
    case 'UPDATE_BASICS':
      return {...state,Basics:{
        ...state.Basics,...action.data
      }};
    case 'UNDO_TODO':
      return state.map(todo => {
        if (todo.id === action.id) {
          return { ...todo, complete: false };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
}

const App = () => {
  const [form, dispatch] = React.useReducer(
    formReducer,
    intialList
  );

  const updateBasicsInfo = _ => {
    dispatch({
      type: "UPDATE_BASICS",
      //You can set your form object its just dummy data
      data: {
            job_title:'Test' + Math.random(),
            job_type:"test",
            ppo:true,
            emp_type:"test",
            start_date_month:"test",
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
    });
  };

  return <>
  <div>
    Current job tiltle:{form.Basics.job_title}
  </div>
  //just dummy functionality to use reducer
  <button onClick={updateBasicsInfo}>
    Update job detail
  </button>
  </>
}

export default App;

这是演示:https : //stackblitz.com/edit/react-nfvktg

注意:它仅更新基础知识字段,而没有其他任何字段!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章