#reactjs #typescript #redux
#reactjs #typescript #redux
Вопрос:
У меня есть такой список:
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
метод для обновления хранилища нужным мне значением для каждого из элементов? Спасибо!
Ответ №1:
Вы можете использовать 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 })}
/>,
...
]