Предварительно заполнить ввод текста с помощью значений объекта - PullRequest
Новая
       3

Предварительно заполнить ввод текста с помощью значений объекта

1 голос
/ 09 января 2020

Я пытаюсь предварительно заполнить текстовые поля уже существующими данными в объекте. Я использую компонентный рендерер, который построен из оператора switch следующим образом (я удалю другие случаи, чтобы сделать его более читабельным): 

switch (data.type) {
    case 'text':
        return (
            <div
                key={data.index}
                data-name={selection}
            >
                <FieldLabel
                    htmlFor={data.name}
                    label={data.value}
                />
                <FormInput
                    type={data.type}
                    name={data.name}
                    placeholder={data.placeholder}
                    onChange={
                        e => props.onCommentsChange(
                            e,
                            data.structure,
                            data.rules
                        )}
                    value={selection}
                    err={props.error === 1
                        && props.validationErrors !== null
                        && data.name in props.validationErrors
                        ? 1
                        : 0
                    }
                />
            </div>
        )

}

Значение ввода - selection переменная, которая установлена ​​следующим образом: 

let selection;
const data = {
    type: props.type,
    options: props.options,
    name: props.name,
    value: props.value,
    structure: props.structure,
    rules: props.rules,
    index: props.index,
    placeholder: props.placeholder,
    order: props.order,
    date: props.date,
    onDateChange: props.onDateChange,
    onFocusChangeHandler: props.onFocusChangeHandler,
    focused: props.focused,
};
const section = Object.entries(data.structure)[0][0];

Исходя из этого, я пытаюсь использовать оператор if, который циклически повторяется и устанавливает для переменной selection значение: 

if (props.usersCurrentSelection !== null && props.usersCurrentSelection !== undefined) {
    console.log(props.usersCurrentSelection.data);
    console.log(section);
    console.log(props.usersCurrentSelection.data[section]);
    if (section in props.usersCurrentSelection.data) {
        Object.keys(props.usersCurrentSelection.data[section]).forEach(
            item => {
                let value = props.usersCurrentSelection.data[section][item];
                console.log(value);
                selection = value;
            }
        );
    }
}

журналы консоли возвращают следующее:

enter image description here

Как вы можете видеть, он находит значение, соответствующее ключу в l oop. А поскольку текстовый компонент принимает переменную selection в качестве значения, я не уверен, почему она не заполняется?

Спасибо за помощь.

1 Ответ

0 голосов
/ 09 января 2020

Это некоторый псевдокод, демонстрирующий подход, который я, вероятно, выбрал бы, основываясь на вашем недавнем комментарии: 

const Input = props => {
  // your switch statement goes here
}


const SectionFields = props => {
  const { type, options, name, value, structure = {}, rules, index, placeholder, order, date, onDateChange, onFocusChangeHandler, focused } = props
  const usersCurrentSelection = props.usersCurrentSelection || { data: {} }
  const section = Object.keys(structure)[0]

  const data = { type, options, name, value, structure, rules, index, placeholder, order, date, onDateChange, onFocusChangeHandler, focused }

  const itemsInSection = Object.values(usersCurrentSelection)

  return itemsInSection.length > 0
    ? (
      <>
        itemsInSection.map(([key, val]) => (
            <Input data={data} item={val} />
        ))
      </>
    )
    : null
}


const Form = props => (
  <>
    <SectionFields /*{props.section1 here}*/ />
    <SectionFields /*{props.section2 here}*/ />
    <SectionFields /*{props.section3 here}*/ />
  </>
)

Это, вероятно, слишком упрощенно c для ваших нужд, но может указывать на правильное направление. Еще немного сложно определить, как должна выглядеть законченная форма целиком и как организованы базовые данные.

...