Подскажите пожалуйста(или дайте наводку на гайд, в котором это описывается), как организовать создание элемента на странице при выполнении пользователем какого-то действия. К примеру, у меня есть на странице selectfield, рядом с ним есть кнопка +. При нажатии на эту кнопку должны появляться такие же selectfield-ы чуть ниже. Я подумал было написать и повесить на кнопку onClick метод, который будет при нажатии вызывать метод-рендер selectfield-a,но мне кажется это неправильно, т.к. он по нажатии просто заново перерисует уже имеющийся филд. Как правильно организовать это взаимодействие?
1 ответ
Приведу пример из моего кода:
const {sources, actions, rows} = this.props;
const SourceList = rows.map(
(row, key) => {
const type = row.get('type');
const props = {
key,
index: key
};
if (type === RowTypes.GROUP) {
return <Group {...props}/>;
} else if (type === RowTypes.VIRTUAL) {
return <Virtual {...props} />
}
return <RowItem
{...props}
/>
}
);
У меня поля строятся по разным типам, а в SourceList
в итоге будет построенная модель. В render
нужно будет просто написать:
<div>{SourceList}</div>
-
мне нужно не совсем это. у меня есть класс селектфилда, в нем есть рендер и запрос по аяксу, по которому приходит список(из которого пользователь выбирает). также есть класс с формой,в котором рендерится форма, а в форму я просто подкидываю <UserSelectfield/>(этот селект имеет некий ref и source). также есть кнопка, которая должна ниже при нажатии генерить еще такие же селектфилды. то есть рендер у меня происходит в самом селекте и потом есть еще рандер формы.– Iga3 авг 2016 в 10:47
-
1какая разница, данные пришли, вы их записали (не знаю куда, может в состояние компонента) они отрендерелись, и сразу обновили все. У вас же DOM строется по данным, данные будут, интерфейс обновится 3 авг 2016 в 10:50
-
да,данные пришли, state селектфилда изменился.я не совсем понимаю, что именно вносить в мапу и где это осуществлять.в хендлере кнопки?– Iga3 авг 2016 в 10:52
-
1На кнопке должно быть событие, которое будет дописывать в массив ваших филдов элемент (пустой или какой то ещё вам нужный). Ну и он будет сразу же отрисован 3 авг 2016 в 10:55
-
1Я не знаю вашей архитектуры, у меня вообще все в редьюсерах обрабатывается, компоненты не знают логики, они только отрисовывают данные. А можно в конструкторе компонента объявить массив в
this.state = {myArray: []}
. А по клику на кнопку делатьthis.setState()
в добавлением вmyArray
элемента. Но логика в компонентах зло, лучше все выносить, да и работать чисто с данными проще в редьюсерах 3 авг 2016 в 11:07
list.map((row) => <MyElement data={row} />)