Material-ui: react-hook-form으로 작업하기

waiting for users upvotes 태그를 추가했습니다. 사람들이 그러한 지원을 찾고 있는지 확실하지 않기 때문에 문제를 닫습니다. 그렇다면 이 문제에 찬성표를 던지십시오. 추천 수에 따라 우선 순위를 정합니다.

https://npm-stat.com/charts.html?package=formik&package=react-hook-form&package=react-final-form

많이 필요합니다 :pray::pray::pray: 해결 방법이 있습니까?

많이 필요합니다!

확실히 필요합니다.

해결책이 무엇인지 알 수 있습니까?

구체적인 내용은 잘 모르겠지만 두 라이브러리를 모두 사용하기 시작했다는 것을 알고 있으며 둘 사이의 긴밀한 통합을 보고 싶습니다. React Hook Form과 Material UI는 궁합이 좋습니다. TypeScript에 대한 지원도 훌륭합니다.

@oliviertassinari 님, TextField 가 기본 입력의 API에서 더 잘 작동하는 것 같습니다! 정말 멋지네요. e.target.value = 'xxx' 를 호출할 때 텍스트 위에 자리 표시자 텍스트 오버레이가 있었습니다. 👍

https://codesandbox.io/s/react-hook-form-conditional-fields-delete-1frsm
위의 예에서 reset API가 호출된 후 <Switch /> 가 재설정되지 않았습니다.

기본 양식 입력 API(입력 참조를 통해 값 설정 및 재설정)를 지원하기 위해 모든 양식 관련 구성 요소를 가질 수 있다면 정말 좋을 것입니다. 나는 그것이 큰 작업이고 react-hook-form과 같은 작은 라이브러리를 지원한다는 것을 이해합니다. 고려해야 할 사항 (아마도 lib가 더 유명해질 때까지 ❤️)

다시 한 번 이 문제를 조사하기 위한 귀하의 시간과 노력에 감사드립니다. 또한 MUI와 함께 작업할 수 있는 작업이 있으면 알려주십시오.

건배
청구서

@bluebill1049 봐 주셔서 감사합니다. 라이브러리는 좋은 견인력을 얻는 것처럼 보이지만 여전히 formik에 한참 뒤떨어져 있습니다. 스위치 재설정이 유일한 문제입니까?

다시 열어 이 문제를 react-hook-form 는 아직 이 마을의 신인이고 더 많은 사용자가 react-hook-form 채택하는지 확인하기 위해 더 많은 시간을 갖고 싶다면 행동이 없습니다. 완전 합리적이라고 생각합니다. 그 동안 react-hook-form 와 호환되는 입력 테이블을 상자 밖으로 생성할 것입니다(코드샌드박스에서도 마찬가지일 수 있음). 여기에도 게시할 것입니다.

react-hook-form이 잘 작동하고 사용량이 증가하면 기본 입력 API(뒤에서 반응 후크 양식이 사용되는 것)로 작업하는 것을 고려할 수 있습니다. input 을 얻는 것이 좋습니다. select , radio 및 checkbox 는 양식의 기본 용도입니다.

참고로 @oliviertassinari 저는 MUI와 react-hook-form 사이의 간격을 좁힐 수 있는 작업을 하고 있습니다. https://github.com/react-hook-form/react-hook-form-input

또한 기본 데이터를 재설정하고 로드하는 데 문제가 있습니다. 이 문제를 살펴보십시오. 또는 적어도 지금은 해결 방법을 제공하십시오.

안녕하세요 @raikusy 제가 위에 게시한 링크를 참조하십시오. 도움이 될 것입니다. 장기적으로 MUI 구성 요소가 기본 형식 api '재설정'을 지원하고 구성 요소 'ref'를 통해 값을 업데이트하는 것이 좋지만 이것은 MUI에 많은 기능과 아이디어가 있다고 확신하는 큰 작업 비용입니다. 어느 것이 더 중요합니다. 반응 후크 형식이 주류 라이브러리가 되거나 대중화될 때까지 위에서 논의한 것처럼 MUI는 솔루션 조사를 시작할 것입니다. 이것이 의미가 있기를 바랍니다 :) 반응 후크 양식도 사용해 주셔서 감사합니다 ❤️🤩🤟🏻

참고로 래퍼 구성 요소는 여전히 ur 양식이 0을 다시 렌더링할 수 있도록 합니다. 입력 상태 업데이트는 래퍼 구성 요소 내에서 격리되어 있기 때문입니다.🤩🤟🏻💃

@bluebill1049 감사합니다. 보기 좋습니다. props에서 데이터를 전달할 때 양식 필드가 기본값을 갖는 조건이 있습니다. 그러면 TextField 구성 요소가 위의 솔루션에서도 작동합니까? 또한 양식에 소품을 사용하여 기본값을 전달하는 더 나은 예를 찾고 있었습니다. props는 폼이 이미 마운트된 후 api 호출에서 나올 수 있습니다.

@raikusy 래퍼 구성 요소와 함께 reset/setValue API를 사용할 수 있어야 합니다.
재설정: 전체 양식 -> https://react-hook-form.com/api#setValue
setValue: 개인용 - > https://react-hook-form.com/api#reset

RHF로 작업하기 위해 <Slider /> 을(를) 얻을 수 없습니다.

다음과 같이 사용:

      <FormControl fullWidth component="fieldset" margin="normal">
        <FormLabel component="legend">Palavras</FormLabel>
        <RHFInput
          as={<Slider min={100} max={1200} step={100} valueLabelDisplay="auto" marks={marks} />}
          type="input"
          name="words"
          register={register}
          setValue={setValue}
        />
      </FormControl>

다음 오류가 발생합니다.

Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (created by SetupAccountForm)
    in Unknown (created by SetupAccountForm)
    in fieldset (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SetupAccountForm)
    in form (created by SetupAccountForm)
    in SetupAccountForm (created by SetupAccountPage)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by SetupAccountPage)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by SetupAccountPage)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Layout)
    in Layout (created by SetupAccountPage)
    in SetupAccountPage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App (created by Root)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (created by Root)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by Root)
    in Provider (created by Root)
    in Root Button.js:233:15

@hbarcelos 슬라이더 같은 외모 값 소품을 지원하지 않습니다 :( 나는 거기에 몇 가지 조사를 할 것입니다. 그 동안, 당신은에 등록되는 등록 사용자 정의 사용 할 수 있습니다 useEffect

감사합니다 @bluebill1049

나는 결국 다음과 같이 만들었습니다.

import React, { useEffect, useCallback, useState, useMemo } from 'react';
import t from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles(theme => ({
  sliderWrapper: {},
  sliderLabel: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(0.5),
    color: theme.palette.primary.main,
  },
}));

function CustomSlider({
  register,
  unregister,
  setValue,
  name,
  rules,
  defaultValue,
  valueLabelAs,
  formatLabel,
  ...rest
}) {
  const cl = useStyles();

  const [currentValue, setCurrentValue] = useState(defaultValue);

  useEffect(() => {
    register({ name });
    return () => unregister(name);
  }, [defaultValue, name, register, setValue, unregister]);

  const valueLabel = useMemo(() => {
    if (!valueLabelAs) {
      return null;
    }

    return React.cloneElement(
      valueLabelAs,
      { className: clsx(valueLabelAs.props.className, cl.sliderLabel) },
      formatLabel(currentValue)
    );
  }, [cl.sliderLabel, currentValue, formatLabel, valueLabelAs]);

  const handleChange = useCallback(
    (_, value) => {
      setValue(name, value);
      setCurrentValue(value);
    },
    [name, setValue]
  );

  return (
    <React.Fragment>
      {valueLabel}
      <Box className={cl.sliderWrapper}>
        <Slider {...rest} onChange={handleChange} defaultValue={defaultValue} />
      </Box>
    </React.Fragment>
  );
}

CustomSlider.defaultProps = {
  rules: {},
  defaultValue: '',
  valueLabelAs: null,
  formatLabel: v => v,
};

CustomSlider.propTypes = {
  register: t.func.isRequired,
  unregister: t.func.isRequired,
  setValue: t.func.isRequired,
  name: t.string.isRequired,
  rules: t.object,
  defaultValue: t.oneOfType([t.number, t.string]),
  valueLabelAs: t.node,
  formatLabel: t.func,
};

export default CustomSlider;

예상대로 작동합니다.

이것도 많이 필요했다

장기적으로 MUI 구성 요소가 기본 양식 API '재설정'을 지원하고 구성 요소 'ref'를 통해 값을 업데이트하는 것이 좋습니다.

@bluebill1049 이건 React나 react-hook-form 자체의 문제 아닌가요? 개발자는 react-hook-form을 사용하여 입력 상태 변경에 "반응"해야 합니까?
내가 사용자 정의 입력을 구축하는 React 개발자이고 요소가 채워지거나 비어 있을 때 다르게 스타일을 지정하고 싶다고 가정해 보겠습니다. 이것을 어떻게 구현해야 합니까? 변경 이벤트가 발생하지 않는 것 같습니다.

라이브러리가 React의 선언적 모델 "외부에서" 입력 값을 변경할 때 변경 이벤트를 발생시키는 것을 고려해 보셨습니까? @test-library/react 에서 수행 되는

이렇게 하면 기본 입력 요소에 의존하는 Material-UI 구성 요소를 지원할 수 있으며 Slider와 같은 다른 구성 요소의 경우 사용자 정의 래퍼가 여전히 필요합니다. 슬라이더에는 값 소품이 있지만 onChange의 서명은 기본 입력과 다릅니다. 다른 양식 라이브러리 #15585와 마찬가지로 통합 라이브러리를 보는 것이 좋을 것이라고 생각합니다.

이 문제가 왜 그렇게 많은 찬성을 얻었는지 궁금했는데, 알게 된 것 같아요 🙃:

https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents

@oliviertassinari , 이 문제에 대해 다시 한 번 자세히 살펴주셔서 감사합니다 👍

내가 사용자 정의 입력을 구축하는 React 개발자이고 요소가 채워지거나 비어 있을 때 다르게 스타일을 지정하고 싶다고 가정해 보겠습니다. 이것을 어떻게 구현해야 합니까? 변경 이벤트가 발생하지 않는 것 같습니다.

기본 입력을 사용하는 내 프로젝트의 솔루션에 대한 CSS 선택기를 찾을 것입니다. 예: 요소 선택에 빈 값이 있고 스타일 표시. 대안으로 react-hook-form watch API를 사용하여 빈 값을 감지하고 prop (내 래핑된 입력 구성 요소 포함)로 전달합니다.

라이브러리가 React의 선언적 모델 "외부에서" 입력 값을 변경할 때 변경 이벤트를 발생시키는 것을 고려해 보셨습니까? @test-library/react에서 수행되는 것처럼?

예, 우리는 react-hook-form-input 아래에서 꽤 많이 하고 있습니다. 😄

저는 수년 동안 양식을 제어한 후에 양식을 작성하기 위한 제어되지 않는 구성 요소를 믿습니다. 실제로는 훨씬 더 쉽게 작업을 수행할 수 있습니다. (Facebook LOL에서 일하는 경우) 모든 문제를 해결할 수는 없지만 양식을 작성할 때 내 직장 생활과 주변 사람들을 더 쉽게 만듭니다. HTML 입력은 자체적으로 상태를 유지하며 이 라이브러리에서 이를 수용하고 싶습니다(옳고 그름을 말하는 것이 아니라 대체 솔루션).

저는 React 애플리케이션을 구축하는 것을 매우 좋아합니다. 그래서 주변에 많은 패키지를 구축하는 것입니다. 나는 React가 제어된 구성 요소를 수용하는 것을 이해합니다. 그러나 react-hook-form 은 register 에서 useEffect register 사용자 정의를 계속 수행할 수 있기 때문에 개발자가 제어되는 양식을 빌드하는 것을 차단하지 않습니다.

결론:

이 문제를 종료할 수 있으며 이 문제와 관련된 내 웹사이트의 링크를 제거하겠습니다. 게다가 react-hook-form-input 를 포함하도록 이 페이지를 업데이트할 수 있습니까?

https://material-ui.com/components/text-fields/#complementary -projects

예, 우리는 react-hook-form-input에서 거의 하고 있습니다.

@bluebill1049 내 제안과 반대되는 접근 방식처럼 들립니다. 다음 사항을 이해합니다.

• 반응 후크 형식:
  
  
  
  1. 입력 DOM 노드를 추적합니다. 값을 변경해야 할 때 input.value = 'x' 합니다. 이것은 입력 값이 변경되었음을 알 수 있는 방법이 없기 때문에 React에서 문제가 됩니다. 예를 들어 변경 이벤트가 트리거되지 않습니다 .
  
  
  2. react-hook-form은 입력 값 변경을 수신 대기해야 하므로 입력에 "입력" 이벤트 리스너를 설정합니다 . 이는 제어된 입력에서 값이 변경 될 때 React에 의한 변경이 이벤트를 트리거하지 않기 때문에 라이브러리에 문제가 됩니다.
  
  
• react-hook-form-input: 라이브러리 는 react-hook-form(i 및 ii)의 이전 두 가지 제한 사항을 해결하기 위해 입력을

1. React가 react-hook-form 접근 방식을 지원하기 위해 훌륭하게 작동할 가능성은 매우 낮고 2. react-hook-form이 제어 및 의사 제어되지 않은 입력( 기본값과 onChange만 수신하는 값), 다음과 같이 제안합니다.

1. react-hook-form은 내부적으로 제어 및 의사 제어되지 않는 문제를 패치합니다. 기본적으로 i 를 해결해야 합니다 ii. (링크된 코드 ​​및 상자에서 제안된 솔루션 참조: dispatch + defineProperty).
2. Material-UI는 필요할 때 react-hook-form에 대한 어댑터를 제공하기 위해 커뮤니티의 도움을 구합니다(#15585 관련).
3. 이 문제를 종료합니다 👌

@oliviertassinari 자세한 답변 감사합니다. 제안된 솔루션으로 추가 조사를 수행하겠습니다. :)

위에서 언급한 React 문제의 대부분은 내가 개선하고 싶은 부분인 제어된 구성 요소를 전환할 때라고 생각합니다.

명확히하기 위해 :

• 변경 시 문제를 재현하려면 https://codesandbox.io/s/heuristic-galileo-1wf8c로 이동하여 버튼 => 누락된 로그를 클릭합니다. 이제 https://codesandbox.io/s/silly-allen-72zz7 로
• 값 변경 문제를 재현하려면 https://codesandbox.io/s/elastic-agnesi-osuuy로 이동하여 버튼 => 누락된 로그를 클릭합니다. 이제 https://codesandbox.io/s/sparkling-rain-3rebh 로

따라서 반응 후크 형식으로 해결할 수 있다고 확신합니다. 이러한 수정 사항을 시도/배포하고 문서에서 우리 측의 책임을 제거할 수 있다면 감사하겠습니다.

이러한 변경 사항은 양식 라이브러리의 매력을 높이는 데 정말 도움이 될 것입니다. 감사합니다. D.

위에서 언급한 React 문제의 대부분은 제어되지 않는 구성 요소에서 개선하고 싶은 부분인 제어 또는 제어되는 구성 요소로 전환할 때 발생합니다.

React는 사용자가 제어되지 않음과 제어됨 사이를 전환할 때 경고합니다. 나는 당신의 요점을 이해하지 못합니다.

따라서 반응 후크 형식으로 해결할 수 있다고 확신합니다. 이러한 수정 사항을 시도/배포하고 문서에서 우리 측의 책임을 제거할 수 있다면 감사하겠습니다.

나는 MUI를 비난하는 것이 아닙니다. 아시다시피, react-hook-form은 이 마을의 새로운 소년입니다. 저는 특정 문제에 대한 관심이나 추진력을 얻으려고 했습니다. 그렇게 보이셨다면 죄송합니다(비난). 다시 한 번 귀하의 도움과 조사에 감사드립니다.

(비난이 아님)

위에서 언급한 React 문제의 대부분은 제어되지 않는 구성 요소에서 개선하고 싶은 부분인 제어 또는 제어되는 구성 요소로 전환할 때 발생합니다.

React는 사용자가 제어되지 않음과 제어됨 사이를 전환할 때 경고합니다. 나는 당신의 요점을 이해하지 못합니다.

죄송합니다 제어 구성 요소를 의미했습니다 :) 내 의견을 수정했습니다.

@bluebill1049 굉장

고마워, @oliviertassinari (당신은 매우 친절합니다)

Material-UI는 제안된 동일한 수정 사항을 적용할 수 있지만 우리는 그렇게 해야 한다고 생각하지 않습니다. 두 가지 단점이 있습니다. 1. Material-UI에서만 작동하며 동일한 노력을 계속해서 수행해야 합니다. 2. 이러한 "해킹"의 소유권은 라이브러리가 취한 트레이드오프(관용적인 React API 우회)에서 비롯된 것처럼 반응 후크 형식으로 유지되어야 합니다.

여러분, 누군가 이 문제에 개입할 경우를 대비하여. (잠시 동안 비밀리에 작업했습니다 😓)

우리는 특히 제어되는 구성 요소를 중심으로 일부 삶의 질 업데이트가 있는 RHF의 다음 주요 버전을 작업하고 있습니다. UI 라이브러리에 대한 지원이 개선될 것입니다. 다음 코드는 제어된 UI 라이브러리에 대해 setValue 및 defaultValue 를 해결하는 동시에 앱/양식 수준에서 최소 다시 렌더링을 유지하고 입력 구성 요소 수준에서 다시 렌더링이 격리됩니다.

다음은 RHF의 V4를 사용할 때의 구문입니다.

import TextField from '@material-ui/core/TextField';

const { control } = useForm();

<Controller as={TextField} control={control} name="firstName" rules={{ required: true }} />

도움이 필요하다.
재료의 텍스트 필드에 문제가 있습니다(아마도 다른 mui도 마찬가지임).
텍스트 필드가 비어 있으면 첫 번째 키 저장소가 느리고 값을 비어 있는 것으로 변경할 때도 마찬가지입니다.
어떤 이유로 전체 양식을 다시 렌더링합니다.

빠른 참고 사항 : 지체 없이 빠르게 입력하고 있습니다. 지연 부분은 위에서 언급한 이유 때문입니다.

안녕하세요 여러분, 이 문제는 react-hook-form에서 컨트롤러를 사용하더라도 계속 발생합니다.
이 문제를 다시 열 수 있습니까? 아니면 내가 잘못하고 있습니까?

예: https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-kqwq0?file=/index.js

편집: 내가 사용하는 솔루션은 InputLabelProps={isEdition && { shrink: isEdition }}
여기서 isEdition 는 편집 화면에서 사용하는 플래그입니다.

@Luccasoli plz는 문서를 참조하십시오: https://react-hook-form.com/api#Controller

MUI 예제가 있는 예제가 있습니다. https://codesandbox.io/s/react-hook-form-controller-079xx

죄송합니다 @bluebill1049 , 하지만 이 예제에서 비슷한 상황을 찾지 못했고 문서에서 이 문제를 제대로 해결할 수 있는 소품을 찾을 수 없었습니다.(

@Luccasoli defaultValue 보세요.

나는 시도했다:

• useForm() 내부의 defaultValues를 상태 값으로 설정하고 useEffect() 내부에서 해당 상태를 설정하려고 했습니다.
• 나는 같은 아이디어를 사용하려고 시도했지만 defaultValue 소품에서 직접 각 컨트롤러

두 가지 방법 모두, textField는 입력이 채워진 것을 인식하지 못하고 레이블이 입력 위에 유지됩니다.

https://codesandbox.io/s/example-muitextfield-setvalue-with-react-hook-form-ijxfp

예, 하지만 이상하게도 defaultValue를 그대로 유지합니다. 사용자에게 이상한 값을 표시하지 않기 위해 항상 빈 문자열 값으로 시작하려고 합니다.

"Loading" defaultValue를 표시할 수도 있지만 빈 초기 값이 여전히 더 흥미롭게 보입니다. 가능하다고 생각하십니까?

편집: 예, 빈 문자열에서도 작동합니다... 하하하, 감사합니다. 전에 시도한 적이 있다고 맹세했지만 그런 것 같습니다.

@bluebill1049 내가 보고 있는 문제를 보여주기 위해 데모를 조정했으며 좋은 솔루션이 있기를 바랍니다.
https://codesandbox.io/s/react-hook-form-controller-n196b?file=/src/index.js
버튼을 활성화하기 전에 확인란의 유효성을 검사하려고 시도하는 것이 선택됩니다. 내가 사용한 다른 모든 필드는 확인란을 제외하고 예상대로 작동합니다.

이 샌드 박스가 Material UI에 정말 유용하다는 것을 알았습니다. 슬라이더, Select 및 기타 몇 가지에 대한 예제가 있습니다.
https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js