Сохранять значения из формы пользовательского интерфейса материала в TypeScript - PullRequest
Новая
       5

Сохранять значения из формы пользовательского интерфейса материала в TypeScript

0 голосов
/ 17 февраля 2020

Каков наилучший способ хранения значений, введенных здесь в текстовые поля? 

const AddUserPage = () => (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
    <form className="ROOT" noValidate autoComplete="off">
      <TextField id="standard-basic" label="Standard" />
    </form>
    </div>
  </div>
);

export default AddUserPage;

Я хочу найти способ, который позволял бы использовать сохраненные значения и в моих мутациях GraphQL без необходимости изменить структуру const () моей страницы. Я не хочу использовать расширение класса компонента или структуру функции здесь.

1 Ответ

0 голосов
/ 17 февраля 2020

Что ваш const() structure делает:

=> (Это синтаксис автоматического возврата.)

Если вы хотите сохранить / повторно использовать ваше значение, вам придется определить некоторые состояние / переменная для хранения данных. Вы также можете сделать это в верхнем компоненте, как: 

import React, { useState } from "react";

const Parent = props => {
  const [state, setState] = useState({ text: "" });
  return <AddUserPage value={state.text} onChange={e => setState(prev => ({ ...prev, text: e.target.value || "" }))} />
}

const AddUserPage = ({ value = "" , onChange }) => (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
    <form className="ROOT" noValidate autoComplete="off">
      <TextField id="standard-basic" value={value} onChange={onChange} label="Standard" />
     // value, and Onchange comes from an upper component
    </form>
    </div>
  </div>
);
...