时间戳

首页 > 解决方案 > 访问 ReactElements 列表中的 Redux Store

reactjs - 访问 ReactElements 列表中的 Redux Store

问题描述

我有一个这样的列表：

const form = [
    <Input title="What is your age?" onSubmit={} />, // this onSubmit sets age
    <MultipleChoice title="What is the weather today?" onSubmit={} />, // this onSubmit sets weather
    <Input title="What is the brand of your rain coat?" onSubmit={} /> // this onSubmit sets rainCoatBrand
]

注意：上面的列表没有在 React 组件内部定义。我也有这样的店：

age: number;
weather: string;
rainCoatBrand: string;

对于 中的每个元素form，如何设置onSubmit方法以使用我想要的值更新商店？谢谢！

标签： reactjstypescriptredux

解决方案

您可以使用store.dispatch()从反应组件外部实现此目的。请注意，要使其正常工作，您需要在某处定义减速器以处理分派的操作并相应地更新存储。

import { store } from './storepath';

const form = [
    <Input 
       title="What is your age?" 
       onSubmit={() => store.dispatch({ // redux action payload })} 
    />, 
    <MultipleChoice 
       title="What is the weather today?" 
       onSubmit={() => store.dispatch({ // redux action payload })} 
    />
    <Input 
       title="What is the brand of your rain coat?" 
       onSubmit={() => store.dispatch({ // redux action payload })} 
    /> 

]

要从输入中访问实际值，您需要修改输入组件本身来处理这个问题。

例如

export const MultipleChoice = (props) => {
   const [value, setValue] = useState();

   ...
   
   return <div title={props.title} onSubmit={() => props.onSubmit(value)}/>
}

const form = [
   <MultipleChoice 
       title="What is the weather today?" 
       onSubmit={(payload) => store.dispatch({ type: 'UPDATE_WEATHER', payload })} 
    />,
    ...
]

推荐阅读