0

Подскажите пожалуйста(или дайте наводку на гайд, в котором это описывается), как организовать создание элемента на странице при выполнении пользователем какого-то действия. К примеру, у меня есть на странице selectfield, рядом с ним есть кнопка +. При нажатии на эту кнопку должны появляться такие же selectfield-ы чуть ниже. Я подумал было написать и повесить на кнопку onClick метод, который будет при нажатии вызывать метод-рендер selectfield-a,но мне кажется это неправильно, т.к. он по нажатии просто заново перерисует уже имеющийся филд. Как правильно организовать это взаимодействие?

3
  • 1
    При нажатии на + добавляешь элемент в какое-то твое хранилище, а это хранилище мапишь list.map((row) => <MyElement data={row} />) 3 авг 2016 в 8:18
  • а потом пробрасываю мапу в рендер?и ключи селектов,лежащих в мапе станут id этих селектов при рендеринге?
    – Iga
    3 авг 2016 в 10:29
  • 1
    Можешь не пробрасывать а прямо писать в блоке рендера код который я написал. (в фигурных скобках конечно) 3 авг 2016 в 10:32

1 ответ 1

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>
8
  • мне нужно не совсем это. у меня есть класс селектфилда, в нем есть рендер и запрос по аяксу, по которому приходит список(из которого пользователь выбирает). также есть класс с формой,в котором рендерится форма, а в форму я просто подкидываю <UserSelectfield/>(этот селект имеет некий ref и source). также есть кнопка, которая должна ниже при нажатии генерить еще такие же селектфилды. то есть рендер у меня происходит в самом селекте и потом есть еще рандер формы.
    – Iga
    3 авг 2016 в 10:47
  • 1
    какая разница, данные пришли, вы их записали (не знаю куда, может в состояние компонента) они отрендерелись, и сразу обновили все. У вас же DOM строется по данным, данные будут, интерфейс обновится 3 авг 2016 в 10:50
  • да,данные пришли, state селектфилда изменился.я не совсем понимаю, что именно вносить в мапу и где это осуществлять.в хендлере кнопки?
    – Iga
    3 авг 2016 в 10:52
  • 1
    На кнопке должно быть событие, которое будет дописывать в массив ваших филдов элемент (пустой или какой то ещё вам нужный). Ну и он будет сразу же отрисован 3 авг 2016 в 10:55
  • 1
    Я не знаю вашей архитектуры, у меня вообще все в редьюсерах обрабатывается, компоненты не знают логики, они только отрисовывают данные. А можно в конструкторе компонента объявить массив в this.state = {myArray: []}. А по клику на кнопку делать this.setState() в добавлением в myArray элемента. Но логика в компонентах зло, лучше все выносить, да и работать чисто с данными проще в редьюсерах 3 авг 2016 в 11:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.