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：回避策はありますか？

とても必要です！

絶対に必要です。

解決策がどうなるかについてのアイデアはありますか？

具体的なことはわかりませんが、両方のライブラリを使い始めたので、2つのライブラリをより緊密に統合したいと思っています。 ReactフックフォームとマテリアルUIは一緒に素晴らしいです。 TypeScriptのサポートも素晴らしいです。

ねえ、 @ oliviertassinariそれを見てくれてありがとう。 MUI 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のような巨大なオープンソースプロジェクトを維持することは私には夢中で、Reactコミュニティに素晴らしい仕事をしています）。 それに加えて、MUIを使用するために自分の側で作業できることがあれば教えてください。

乾杯
明細書

@ bluebill1049ご覧いただきありがとうございます。 ライブラリは良い牽引力を得ているようですが、それでもformikよりはるかに遅れています。 スイッチのリセットだけが問題ですか？

この問題を再開して調査してくれたreact-hook-formはまだ町の新しい男の子であり、より多くのユーザーがreact-hook-form採用しているかどうかを確認するためにもう少し待ってみたい場合は、行動を起こしません。私はそれが完全に合理的だと思います（私の心の中でさえ、それがMUIで動作することを切望しています、ハハハは利己的でした😼）。 それまでの間、 react-hook-formと互換性のある入力テーブルを作成します（おそらくコードサンドボックスでも）。ここにも投稿します。

物事がreact-hook-formでうまく機能し、使用量が大きくなっている場合は、ネイティブ入力API（react hook formが舞台裏で使用するもの）を使用することを検討できます。 inputを取得するのは素晴らしいことです。 select 、 radio 、 checkboxは、フォームの主な用途として機能します。

参考までにhttps://github.com/react-hook-form/react-hook-form-input

また、デフォルトデータのリセットとロードに関する問題に直面しています。 この問題を調べてください。 または、少なくとも今のところ回避策を提供します。

ねえ@raikusy私が上に投稿したリンクを見てください、私はそれがあなたを助けると思います。 長期的には、MUIコンポーネントがネイティブフォームAPI'reset 'をサポートし、コンポーネント' ref 'を介して値を更新するのは素晴らしいことですが、これはMUIに多くの機能とアイデアが並んでいると確信している、高額な作業です。これはもっと重要です。 上記で説明したように、reactフックフォームが主流のlibになるか、人気が出るまで、MUIは解決策の調査を開始します。 これらが理にかなっていることを願っています:)反応フックフォームも使用してくれてありがとう❤️🤩🤟🏻

参考までに、ラッパーコンポーネントを使用すると、フォームの再レンダリングを0にすることができます。 入力状態の更新はラッパーコンポーネント内で分離されているためです。🤩🤟🏻💃

ありがとう@ bluebill1049これは素晴らしく見えます。 小道具からデータが渡されるときにフォームフィールドがデフォルト値になるという条件があります。 では、TextFieldコンポーネントは上記のソリューションでも機能しますか？ また、小道具を使用してデフォルト値をフォームに渡すより良い例を探していました。 小道具は、フォームがすでにマウントされた後のapi呼び出しから来る場合があります。

@raikusyラッパーコンポーネントでreset / setValueAPIを使用できるはずです。
リセット：フォーム全体-> https://react-hook-form.com/api#setValue
setValue：個人用-> https://react-hook-form.com/api#reset

<Slider />をRHFで動作させることができません。

次のように使用します。

      <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登録されているカスタムレジスタを使用する必要があるかもしれません

どうもありがとう

私はこのようなものを作ることになりました：

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'reset 'をサポートし、コンポーネント' ref 'を介して値を更新するのは素晴らしいことです。

@ bluebill1049これはReactまたはreact-hook-form自体の問題ではありませんか？ 開発者は、react-hook-formを使用して、入力状態の変化にどのように「反応」することになっていますか？
私がカスタム入力を作成するReact開発者であり、要素がいっぱい/空になったときに要素のスタイルを変えたいとしましょう。これをどのように実装すればよいですか？ 変更イベントは発生していないようです。

ライブラリがReactの宣言型モデルの「外部」で入力値を変更したときに変更イベントを発生させることを検討しましたか？ @ test-library / reactで行われているように？

これにより、ネイティブ入力要素に依存するMaterial-UIコンポーネントのサポートが可能になります。スライダーなどの他のコンポーネントでは、カスタムラッパーが引き続き必要になります。 スライダーにはバリュープロップがありますが、onChangeのシグネチャはネイティブ入力とは異なります。 他のフォームライブラリと同じように統合ライブラリを見るのは素晴らしいことだと思います：＃15585。

なぜこの問題がこれほど多くの賛成を得たのか疑問に思っていたのですが、私はそれを見つけたと思います🙃：

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

ちょっと@oliviertassinari 、この問題にもう一度近づいてくれてありがとう👍

私がカスタム入力を作成するReact開発者であり、要素がいっぱい/空になったときに要素のスタイルを変えたいとしましょう。これをどのように実装すればよいですか？ 変更イベントは発生していないようです。

ネイティブ入力を使用している自分のプロジェクトでソリューションのCSSセレクターを探します。たとえば、要素に空の値があり、スタイルを表示します。 別の方法として、react-hook-form watch APIを使用して空の値を検出し、 propとして渡します（ラップされた入力コンポーネントを使用）。

ライブラリがReactの宣言型モデルの「外部」で入力値を変更したときに変更イベントを発生させることを検討しましたか？ @ test-library / reactで行われているように？

ええ、私たちはほとんどreact-hook-form-input下でそれをやっています。 😄

何年にもわたってフォームを制御した後、フォームを構築するための制御されていないコンポーネントを信じています。これにより、作業がはるかに簡単になります。 すべてのエッジケースを解決できるわけではありませんが（Facebook LOLで作業している場合）、フォームの作成に関しては、確かに私の仕事や周りの人の仕事が楽になります。 HTML入力はそれ自体がステートフルであり、このlibに含めたいと思います（正しいか間違っているかではなく、代替ソリューションです）。

私はReactアプリケーションを構築するのが大好きです。そのため、その周りに多くのパッケージを構築しています。 Reactが制御されたコンポーネントを採用することを理解しています。 ただし、react-hook-formは、開発者がフォーム制御を構築することをブロックしていません。これは、 useEffectカスタムregisterを実行できるためです。

結論：

この問題を解決できると思います。この問題に関連するウェブサイトのリンクを削除します。 さらに、このページを更新してreact-hook-form-inputを含めることはできますか？

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

ええ、私たちはほとんどreact-hook-form-inputの下でそれを行っています。

@ bluebill1049それは私の提案とは反対のアプローチのように聞こえます。 私は次のことを理解しています。

• react-hook-form：
  
  
  
  1. 入力DOMノードを追跡します。 値を変更する必要がある場合は、 input.value = 'x'ます。 これは、入力値が変更されたことを知る方法がないため、Reactにとって問題があります。 たとえば、変更イベントはトリガーされません。
  
  
  2. react-hook-formは入力値の変更をリッスンする必要があるため、入力に「入力」イベントリスナーを設定します。 制御された入力から値が変更されても、Reactによる変更はイベントをトリガーしないため、これはライブラリにとって問題です。
  
  
• react-hook-form-input：ライブラリは、react-hook-formの以前の2つの制限（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/silly-allen-72zz7にアクセスして、ディスパッチアプローチが問題をどのように解決するかを確認します。
• 値の変更の問題を再現するには、https：//codesandbox.io/s/elastic-agnesi-osuuyにアクセスし、ボタン=>欠落しているログをクリックします。 ここで、 https： //codesandbox.io/s/sparkling-rain-3rebhにください。

だから私はあなたがreact-hook-formでそれを解決できると確信しています。 これらの修正を試して/展開し、ドキュメントから私たちの側の責任を取り除くことができれば幸いです😛。

これらの変更は、フォームライブラリの牽引に本当に役立つはずです。感謝していただければ幸いです：D。

あなたがReactで上で述べた問題のほとんどは、私が改善したい部分である、制御されていないコンポーネントから制御されたコンポーネントまたは制御されたコンポーネントに切り替えるときだと思います。

ユーザーが制御されていないものと制御されているものを切り替えると、Reactは警告します。 私はあなたの主張を理解していません。

だから私はあなたがreact-hook-formでそれを解決できると確信しています。 これらの修正を試して/展開し、ドキュメントから私たちの側の責任を取り除くことができれば幸いです😛。

まさか私はMUIを非難しているハハ、私はMUIが大好きです（私の小さな星⭐️と一緒に）。 ご存知のように、react-hook-formは町の新しい男の子です。私は特定の問題について注意や勢いを得ようとしていました。 あなたがそのように見つけたら、私は謝罪します（非難）。 改めてご協力とご調査に感謝いたします。

（非難ではない）

あなたがReactで上で述べた問題のほとんどは、私が改善したい部分である、制御されていないコンポーネントから制御されたコンポーネントまたは制御されたコンポーネントに切り替えるときだと思います。

ユーザーが制御されていないものと制御されているものを切り替えると、Reactは警告します。 私はあなたの主張を理解していません。

申し訳ありませんが、制御されたコンポーネントを意味しました:)コメントを修正しました

@ bluebill1049素晴らしい:)

どうもありがとう、 @ oliviertassinari （あなたはとても親切です）

Material-UIは同じ提案された修正を適用できますが、そうすべきではないと思います。2つの欠点があります。1。Material-UIでのみ機能し、同じ作業を何度も繰り返す必要があります。 2.これらの「ハック」の所有権は、ライブラリが取ったトレードオフ（慣用的なReact APIをバイパスする）に起因するため、react-hook形式のままにする必要があります。

誰かがこの問題に踏み込んだ場合に備えて、やあみんな。 （私たちはしばらくの間密かにこれに取り組んできました😓）

私たちは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 ： index.js

編集：私が使用している解決策はInputLabelProps={isEdition && { shrink: isEdition }}
ここで、 isEditionは、編集画面で使用しているフラグです。

@Luccasoli plzはドキュメントを参照してください： //react-hook-form.com/api#Controller

MUIの例を含む例があります： //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
ボタンを有効にする前に、チェックボックスを検証しようとしています。 チェックボックスを除いて、私が使用した他のすべてのフィールドは期待どおりに機能します。

このサンドボックスはマテリアルUIに非常に便利であることがわかりました。スライダー、選択、その他いくつかの例があります。
https://codesandbox.io/s/react-hook-form-controller-079xx?file=/src/index.js