Lesson 8

[vvscode]

No description provided.

[nickovchinnikov]

Классика name: "Alice" =)

[nickovchinnikov]

FormComponent -> children?

<DemoForm title="GameSettingsFormRef">{GameSettingsFormRef}</DemoForm>

[vvscode]

см выше - DemoForm не просто для визуализации обертка

[nickovchinnikov]

const DemoForm: React.FC<DemoFormProps> = ({ children: FormComponent, title }) => {

[vvscode]

я еще пробрасываю ref и callback - тогда children придется переименовывать (компонент должен быть с большой буквы)

те

{children} // ok

<Children onSubmit={} /> // не ок

[nickovchinnikov]

children: FormComponent вроде смапит имя или нет?

[vvscode]

смапит, но это же не children )) children (по крайней мере в моей практике) - дочерние элементы, которые рендерятся как есть

[nickovchinnikov]

Хорошо, принял + понял )

[nickovchinnikov]

const getInputValue = (target: HTMLFormElement, name: string) => 
  (target.querySelector(`[name=${name}]`) as HTMLInputElement).value

//...

   this.props.onSubmit({
      player1: {
        name: getInputValue("player1Name")
//...

[nickovchinnikov]

dump component form?

[vvscode]

нет, суть в том, чтобы компонент наружу отдавал чистые данные (все значения)

[nickovchinnikov]

Я имел в виду что то вроде того

      export const Player = ({ children: playerName, ... }) <fieldset>
          <legend>Game Settings</legend>
          <fieldset>
            <legend>{playerName}</legend>
            <label>
              Name:
              <input
                name={playerName}
                type="text"
                placeholder={`${playerName} name`}
                required
              />
            </label>
//...

<form onSubmit={this.handleSubmit}>
  <Player prop1="some" ...>Player1</Player>

[vvscode]

в реальном проекте (ну кроме того, что я бы так не писал - возможно да)

но тут через все компоненты я стараюсь провести одну структуру (с минимальными изменениями, кроме подхода к работе с данными)

а этот подход сработает только в случает с DOM ( на рефах и стейте будет уже совсем другое)

[nickovchinnikov]

А если прокинуть ref или обработчик сверху? Думаю привевать композицию с самого начала студентам надо )

[nickovchinnikov]

• dump component form ?

[vvscode]

тоже что и выше )

[nickovchinnikov]

Proposal

Можно было бы везде использовать один тип, тоесть возможно его стоило бы разместить в src/types

export interface Player {
 name: string;
 color: string;
 symbol: string;
}

И стейт

interface GameSettingsFormState {
  player1: Player;
  player2: Player;
}

[nickovchinnikov]

Долистал до https://github.com/nickovchinnikov/react-js-tutorial/pull/14/files#diff-fc42a5bbd7418b6789d5ac5e3c143976
А почему его не использовать бы тут?

[vvscode]

потому что это эволюционное изменение прошлых компонент - чтобы показать разницу с минимальными изменениями (все идет к Formik, где так и есть)

[nickovchinnikov]

ИМХО структура данных может быть не привязана к view

[vvscode]

полностью согласен, НО (=) ):

в примере с DOM / REF струтура плоская (что определяется самой формой хранения данных - plain html), и здесь я не хочу перескакивать ступеньку (один шаг - переход на state, второй шаг - держать вложенные данные в стейте )

Могу просто сделать еще одну форму для этого шага

[nickovchinnikov]

as GameSettingsFormState ?

[vvscode]

это не совместимые типы -только если через unkown кастовать, тут меня вообще очень сильно удивили тайпинги для setState - он даже Partial<GameSettingsFormStateState> не хочет принимать

[nickovchinnikov]

Странно, действительно (

[nickovchinnikov]

dump component form ?
я думаю, это можно сделать "глупыми" компонентом для всех случаев
тут просматривается несколько компонентов Player, можно красиво скомпозировать ИМХО