Блог

У меня есть такой список:

 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 метод для обновления хранилища нужным мне значением для каждого из элементов? Спасибо!

Вы можете использовать store.dispatch() для достижения этого извне компонента react. Обратите внимание, что для этого вам понадобятся определенные где-то редукторы, чтобы обрабатывать отправленные действия и соответствующим образом обновлять хранилище.

 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 })} 
    />,
    ...
]