Javascript 根据onChange事件值更改redux状态

我使用的是redux，并且我的状态是空字符串值。必须使用input onChange事件填写每个空键。假设我想更改“business_selected”键，该函数应该是什么样的？这是我的状态：

const initialState = {

        user: {},
        applications: [
            {
                companyFlow: {
                    stage1: {
                        business_activity: "",
                        business_selected: ""
                    },

                    stage2: {
                        legal_name: "",
                        registration_number: "",
                        business_website: "",
                        incorporation_date_text: "",
                        legal_form: ""
                    }
                }
            }
        ]
};

export default function changeInput(state = initialState, action) {
  switch (action.type) {
    case CHANGE_INPUT:
      return {
        // ??????
      };
    default:
      return state;
  }
}

---

onChnage

值应存储在本地状态，而不是redux状态。

---

理想情况下，只有全局值应该存储在redux状态。

通常使用

组件本身中的本地状态处理
onChange
，但是如果您想在
redux
中执行此操作，您可以这样做

export default function changeInput(state = initialState, action) {
  switch (action.type) {
    case CHANGE_INPUT:
      return {
       ...state,
       applications: state.applications.map(application => {
        return Object.assign({}, application, {
         ...application,
         companyFlow: {
          ...application.companyFlow,
          stage1: {
            ...application.companyFlow.stage1,
            business_selected: action.payload
          }
         }
        }
       return application
      });
    default:
      return state;
  }
}

撇开对深度嵌套的状态变量（这是要避免的）的担忧不谈，如果您在最基本的层面上问的是如何将某些操作绑定到组件事件，那么就理所当然地认为这些变量是全局可访问的（尽管这似乎是一个很好的用例）（例如，
onChange
、
onKeyUp
等属性），我建议您参考该主题

但是，下面的示例非常简单，它演示了一般概念。您可以自行决定在状态复杂性和组件灵活性之间进行扩展、重新平衡


//依赖项
const{render}=ReactDOM，
{createStore}=Redux，
{connect，Provider}=ReactRedux
//存储初始化
const defaultState={
业务活动：{
选项：[“经营”、“投资”、“融资”]，
当前值：“”
},
法律名称：{
当前值：“”
}
},
通知者=（状态=默认状态，操作）=>{
开关（动作类型）{
案例“SET_PARAM”：{
const{payload:{param，val}}=action
返回{…state[param]：{…state[param]，currentValue:val}
}
默认值：返回状态
}     
},
store=createStore（Appeducer）
//任意下拉组件
常量下拉列表=（{onParamChange，param，options，val}）=>(
（val=e.target.value，onParamChange（param，val））}
>
{[''，…选项].map（（opt，key）=>{opt}）
)
//下拉式容器
var mapStateToProps=（状态，{param}）=>({
val:state[param]['currentValue']| |'，
选项：[…状态[参数][“选项”]]
}),
mapDispatchToProps=（dispatch，{param，val}）=>（{onParamChange:（param，val）=>dispatch（{type:'SET_param'，payload:{param，val}}}）
const dropdowncainer=connect（mapStateToProps、mapDispatchToProps）（下拉）
//任意输入组件
常量输入框=（{onParamInput，param，val}）=>(
（val=e.target.value，onParamInput（param，val））}
>
)
//输入框容器
var mapStateToProps=（state，{param}）=>（{val:state[param]['currentValue'].| |'''}），
mapDispatchToProps=（dispatch，{param，val}）=>（{onParamInput:（param，val）=>dispatch（{type:'SET_param'，payload:{param，val}}}）
const InputBoxContainer=connect（mapStateToProps，mapDispatchToProps）（InputBox）
//结果状态镜像
常量打印输出=（{activity，name}）=>当前业务活动为{activity | | | | | | | | | | | | | | | U;}
//打印容器
var mapStateToProps=（{businessActivity:{currentValue:activity}，legalName:{currentValue:name}}}）=>（{activity，name}）
const PrintOutContainer=connect（mapStateToProps）（打印输出）
//提供者
渲染(
,
document.getElementById（'root'））
)