Как написать форму(select) на react?

Question

[Stergy]

Здравствуйте, я абсолютный новичок.
Стоит такая задача.
Есть Json файл:

SOME_JSON =[{"name1": "Some_name1", "id": 123}, {"name2": "Some_name2", "id": 987}]

Как можно написать форму <select> на реакте, которая бы использовала этот JSON файл, и в качестве полей выводила бы значение элементов name1 и name2?
Возможно где-то есть примеры реализации подобной формы?
Всем заранее огромная благодарность за помощь.

Answer 1

[Антон Спирин]

Здравствуйте, я абсолютный новичок.

Так начните знакомство с библиотекой с изучения документации.

Прочитав приведенные ниже пункты, вы сможете решить поставленную перед вами задачу:
Работа с формами.
Построение списков.
Если и после этого не получится, пройдите туториал.
Если есть представление как это сделать, но есть конкретные вопросы - задавайте.

Сам селект можно реализовать нативными или кастомным. Второй вариант сложнее, но используют обычно именно его.
Вы всегда можете поставить и стилизовать вендорную библиотеку, что сэкономит время. Просто введите в поиске react select и посмотрите варианты.

Comments

[Stergy]

с документацией ознакамливаюсь, как сделать простую форму понимание есть.
Нет понимания как считать с JSON файла значение полей name1 и name2 и использовать это в select

P.S. Вопрос написал не сразу, а реально читал документацию, пытался реализоать и как крайний вариант уже написал.
Т.к. новичок - очень сильно сказывается отсутствие опыта и знаний.

[Антон Спирин]

Stergy, самый простой вариант:
1. приводим опции к единому виду:

const options = [
  {
    title: "Some name",
    value: '1',
  },
  {
    title: "Some name 2",
    value: '2',
  },
];

2. JSX:

return (
  <select name="someName" value={someValue} onChange={this.handleChange}>
    {options.map(option => (
      <option value={option.value}>{option.title}</option>
    ))}
  </select>
);

Что-то более сложное думаю для вас пока будет тяжело.

Пример моего select из текущего проекта

Select:

interface Props {
  name?: string
  value?: string
  values?: string[]
  defaultValue?: string
  placeholder?: string
  options: Array<{
    title: string
    value: string
  }>
  onChange?: Function
  className?: string
  multiple?: boolean

}

interface State {
  value: string
  values: string[]
}


class DropdownSelect extends React.Component<Props, State> {

  static displayName = 'DropdownSelect';

  static Option = Option;
  static OptionsList = OptionsList;

  state = {
    value: this.props.value || null,
    values: this.props.values || [],
    isOpened: false,
  };

  get value() {
    return this.state.value;
  }

  get values() {
    return this.state.values;
  }

  componentDidMount() {
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
    if (nextProps.values !== this.props.values) {
      this.setState({ values: nextProps.values });
    }
  }

  componentDidUpdate(prevProps: Props, prevState: State) {
  }

  componentWillUnmount() {
  }

  shouldComponentUpdate(nextProps: Props, nextState: State) {
    return true;
  }

  handleOptionClick = value => {
    const { onChange, name } = this.props;

    onChange({ target: { name, value } });
    this.setState({ value });
  };

  handleMultiOptionChange = e => {
    const { onChange, name } = this.props;
    const target = e.target as HTMLInputElement;
    const values = _.xor(this.state.values, [target.name]);

    this.setState({ values }, () => {
      onChange({ target: { name, value: values } });
    });
  };

  getCurrentValue() {
    const { value } = this.state;
  }

  renderSimpleOptionsList() {
    const { options } = this.props;

    return (
      <OptionsList className="react-list">
        {options.map(option => (
          <Option
            key={option.value}
            isActive={this.state.value === option.value}
            onClick={() => this.handleOptionClick(option.value)}>{option.title}</Option>
        ))}
      </OptionsList>
    );
  }

  renderMultipleOptionsList() {
    const { options } = this.props;
    const { values } = this.state;

    return (
      <OptionsList className="react-list">
        {options.map(option => (
          <OptionWrapper
            key={option.value}
          >
            <StyledCheckBox
              onChange={this.handleMultiOptionChange}
              name={option.value}
              checked={(values as ArrayWithIncludes<string>).includes(option.value)}
            >
              {option.title}
            </StyledCheckBox>
          </OptionWrapper>
        ))}
      </OptionsList>
    );
  }

  renderOptionsList() {
    const { options, multiple } = this.props;

    return multiple ? this.renderMultipleOptionsList() : this.renderSimpleOptionsList();
  }

  @withRaven
  render() {
    const { options, placeholder = 'Select', className, multiple } = this.props;
    const { value } = this.state;
    const currentValue = (!multiple && value) ?
      (options as ArrayWithFind<{ title: string, value: string }>).find(option => option.value === value).title : placeholder;

    return (
      <Wrapper className={className}>
        <Dropdown closeOnClickInside={!multiple} dropdown={this.renderOptionsList()}>
          {!this.props.children && <Value>{currentValue}<ArrowDown src={require('img/newweb/ic-arrow-menu.svg')} /></Value>}
          {this.props.children}
        </Dropdown>
      </Wrapper>
    );
  }
}

export default DropdownSelect;

Dropdown:

import * as React from 'react';
import styled from 'styled-components';
import withRaven from '../../../lib/withRaven';

const Wrapper = styled.div`
  position: relative;
  display: inline-block;
`;

const Head = styled.div`
  
`;

const Body = styled.div`
  position: absolute;
  top: 100%;
  width: 100%;
`;

interface Props {
  dropdown: any
  onShow?: Function
  onHide?:Function
  className?: string
  closeOnClickOutside?: boolean
  closeOnClickInside?: boolean
}

interface State {
  isActive: boolean
}

class Dropdown extends React.Component<Props, State> {
  static Head = Head;

  static Body = Body;

  static displayName = 'Dropdown';

  static defaultProps = {
    closeOnClickInside: true,
    closeOnClickOutside: true,
  };

  state = {
    isActive: false,
  };

  wrapper: HTMLDivElement;

  getWrapperRef = node => this.wrapper = node;

  shouldComponentUpdate(nextProps: Props, nextState: State) {
    return nextProps.dropdown !== this.props.dropdown ||
      nextState.isActive !== this.state.isActive;
  }

  componentWillUnmount() {
    this.removeOutsideClickListener();
  }

  onClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }), () => {
      this.state.isActive ? this.onShow() : this.onHide();
    });
  };

  onWrapperClick = () => {

  };

  onHeadClick = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }), () => {
      this.state.isActive ? this.onShow() : this.onHide();
    });
  };

  onBodyClick = () => {
    if (this.props.closeOnClickInside) {
      this.setState({ isActive: false }, this.onHide);
    }
  };

  onShow() {
    const { onShow, closeOnClickOutside } = this.props;

    if (closeOnClickOutside) {
      this.addOutsideClickListener();
    }

    if (onShow) {
      onShow();
    }
  }

  onHide() {
    const { onHide, closeOnClickOutside } = this.props;

    if (closeOnClickOutside) {
      this.removeOutsideClickListener();
    }

    if (onHide) {
      onHide();
    }
  }

  addOutsideClickListener() {
    document.addEventListener('mousedown', this.onClickOutside);
  }

  removeOutsideClickListener() {
    document.removeEventListener('mousedown', this.onClickOutside);
  }

  onClickOutside = e => {
    const { onHide } = this.props;

    if (this.wrapper && !this.wrapper.contains(e.target)) {
      this.setState({ isActive: false });
    }

    if (onHide) {
      onHide();
    }
  };

  @withRaven
  render() {
    const {
      children,
      dropdown,
      className,
    } = this.props;

    const { isActive } = this.state;

    return(
      <Wrapper
        className={className}
        innerRef={this.getWrapperRef}
      >
        <Head onClick={this.onHeadClick}>{children}</Head>
        {isActive && <Body onClick={this.onBodyClick}>{dropdown}</Body>}
      </Wrapper>
    );
  }
}

export default Dropdown;

[Stergy]

Пример из вашего проекта для меня вообще не постежим))))))
На данный момент у меня все выглядит вот так

<Select
                            value={внешняя функция которая считывает JSON}
                            size={'default'}
                           placeholder="Select name"
                            className='name-select'
                            onChange={внешняя функция которая меняет элементы в select }
                            style={{width: '100%'}}
                        >
                        </Select>

В Вашем примере у элементов title и value нет кавычек, у меня же они есть, не знаю насколько это критично?

SOME_JSON =[{"name1": "Some_name1", "id": 123}, {"name2": "Some_name2", "id": 987}]

Редактировать Json я не могу.
Как я понимаю моя задача сейчас сводится к написанию 2х функций: 1 которая считывает JSON, 2 - которая меняет элементы
Правильно ли я рассуждаю?

[Антон Спирин]

Stergy, вам надо привести данные из импортированного массива к одному виду. Можно попробовать использовать для этого Object.values:

const options = SOME_JSON.map(el => {
  const [ title, value ] = Object.values(el);
  return { title, value };
});

Демо

[Stergy]

Антон Спирин, не совсем понял для чего используется функция в Вашем последнем комментарии. Т.е. к какому виду мы приводим JSON? Что бы все элементы были без кавычек?

[Антон Спирин]

Stergy,

[{"name1": "Some_name1", "id": 123 }, {"name2": "Some_name2", "id": 987 }]

превращается в:

[{ title: "Some_name1", value: 123 }, { title: "Some_name2", value: 987 }]

Кавычки в JavaScript для переменных не обязательны, если они не содержат запрещенных символов.
В JSON они обязательны для всех ключей.

[Stergy]

Антон Спирин, Огромное спасибо, ну раз уж начал Вас задалбывать, можно последний вопрос.
Мало ли, может вы знаете, и не придется создавать новый вопрос.
Мой JSON файл находится в переменной окружения .env
Прописан он там вот так.

SOME_JSON =[{"name1": "Some_name1", "id": 123}, {"name2": "Some_name2", "id": 987}]

Если я вызываю его оттуда и тупо прописываю на странице реакта где делаю Select, и в одном случае работает а в другом нет, не знаете с чем это может быть связано?
Прилагаю скрин из консоли где вывожу оба

[Антон Спирин]

Stergy, с переменной окружения приходит строка ее надо парсить:
const array = JSON.parse(SOME_JSON);
Во втором случае это массив.

[Stergy]

Антон Спирин, Огромное спасибо, не знаю как Вас можно отблагодарить.
Вы действительно меня спасли.

[Stergy]

Не знаю, можно ли писать здесь, или стоит создать новый вопрос. Но все же попробую.
По крайней мере, здесь хотя бы будет ясен контекст вопроса.

Сейчас все работает, select появляется
Часть кода которая получилась в итоге, выводящая select

handleChange = (selectedOption) => {
        this.setState({account_id: selectedOption})
  }

const options  =[{"name1": "Some_name1", "id": 123}, {"name2": "Some_name2", "id": 987}]

 <span>Names</span>
<Select
                            size={'default'}
                            placeholder="Select a name"
                            className='some-name'
                            onChange={this.handleChange}
                            style={{width: '100%'}}
                        >
                            {options.map(option => (
                                <option value={option.id}>{option.name}
                                </option>
                            ))}
                        </Select>
</span>

Вот в чем собственно вопрос.
По умолчанию select появляется пустым и только по клику выподают значения. Можно ли как-то сделать, что-бы по умолчанию уже стояло первое значение. Аналог html аттрибута selected.
Т.е. сейчас как на первых 2 скриншотах, а нужно что б было, как на 3 и 4

Есть предположение, что нужно создать у selecta атрибут value={что-то прописать}, ну уверенности в этом нет, и нет понимания что прописывать.
Не могли бы подсказать направление в каком двигаться, что б решить эту проблему?
Сейчас вот так

.

А нужно что б было вот так

.

[Антон Спирин]

Stergy,

<select
  value={this.state.acountId}
  ...
>
  ...
</select>

[Stergy]

Антон Спирин, я пробовал так делать - не работает
тем более acountId содержит только сам айдишник, там же нет имени.



Или я в функции

handleChange = (selectedOption) => {
        this.setState({account_id: selectedOption})
  }

должен был как-то имя передавать?

[Антон Спирин]

Stergy, да:

handleChange = e => {
  this.setState({account_id: e.target.value });
}

Ну и начальное состояние у вас должно совпадать с value одной из опций.


Пример