Material-ui: [TextField]は再レンダリングに集中できなくなります

+1

Textfieldsをスムーズに機能させるには、defaultValueでonBlurイベントを使用する必要があります。

誰かがこれを機能させるための回避策がありますか？

これはもう問題ではないと思います。 以下のコードを参照してください。

//taken from examples/webpack-example

/** In this file, we create a React component which incorporates components provided by material-ui */

const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');
const TextField = require('material-ui/lib/text-field');
const Dialog = require('material-ui/lib/dialog');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
const Colors = require('material-ui/lib/styles/colors');

const Main = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getInitialState () {
    return {
      muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
      counter: 0,
    };
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  componentWillMount() {
    let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
      accent1Color: Colors.deepOrange500,
    });

    this.setState({muiTheme: newMuiTheme});
  },

  componentDidMount() {
    this.refs.textField.focus();
  },

  render() {

    console.log(this.state.counter);

    let containerStyle = {
      textAlign: 'center',
      paddingTop: '200px',
    };

    let standardActions = [
      { text: 'Okay' },
    ];

    return (
      <div style={containerStyle}>
        <Dialog
          title="Super Secret Password"
          actions={standardActions}
          ref="superSecretPasswordDialog">
          1-2-3-4-5
        </Dialog>

        <h1>material-ui</h1>
        <h2>example project</h2>

        <TextField ref="textField" onChange = {this._incrementStateCounter}/>
        <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />

      </div>
    );
  },

  _handleTouchTap() {
    this.refs.superSecretPasswordDialog.show();
  },

  _incrementStateCounter () {
    this.setState({counter: this.state.counter + 1});
  },

});

module.exports = Main;

これが動作中のアプリです（TextField入力が変更されると更新された状態がコンソールに記録されます）。 TextFieldがフォーカスを保持していることがわかります。

私はまだこれを取得します。 @ shaurya947の例では、TextFieldに初期値プロパティがなかったため、バグを再現しませんでした。
使用を再現する
<TextField ref="textField" value={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

または

<TextField ref="textField" defaultValue={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

また、この問題の回帰と思われるものも見ています。 私のTextFieldsは再レンダリングへの焦点を失っています。 私は設定していますvalueの小道具TextField 、それが制御コンポーネントであるので、。

コンソールに新しい警告が表示されます。「TextFieldは、制御対象のテキスト型の制御されていない入力を変更しています」。 以前にそれを見たのを覚えていません、それがここに関連しているかどうかはわかりません。 TextField最初の文字を入力すると、警告が表示されます。

少しデバッグすると、何かがTextFieldフォーカスを失っているようです。 内部onBlurハンドラーが呼び出され、 TextFieldのisFocused内部状態がfalseに切り替わります。 onBlurハンドラーの間にdocument.activeElementをログに記録すると（どのコンポーネントがフォーカスを盗んだかを判別するため）、ドキュメントのルート（本文）がログに記録されます。

ぼかしイベントのソースがアプリの他の場所のMenu内の最初のMenuItemであると判断することで、これをさらに絞り込むことができました。 disableAutoFocusプロパティをtrue 、問題が解決しました。 これが他の誰かに役立つことを願っています。

これをキャプチャするために別の問題を開きました：＃4387。

これはまだ問題であることが確認できます...

非常に単純なログインフォームで表示します-これをreduxフォームと組み合わせて使用​​しています。フォームを操作すると、再レンダリング（reduxフォームの用語でフィールドに触れた）が発生し、フォーカスが失われます。

回避策として、エラー状態に変化があった場合にのみ実際のフォームを再レンダリングします。

selectable=trueとして設定されたTable内にTextField配置することで、この問題を簡単に再現できます。 あなたはそれを編集を開始するには、テキストフィールドをクリックするたびに、行が（私はいくつか推測するように、フォーカスを取得し、その背景色を変更しますpropsラインのは次のように設定されることがありますselected=trueので、）再レンダリングをトリガーすると、フォーカスが失われます...

したがって、基本的にselectable Table内でTextField使用することはできません。とにかく、それが優れたUXプラクティスであるかどうかはわかりませんが、それでも:)

私たちのプロジェクトでは、再生装置をプッシュしようと試みることができることに気づきました。

これに対する回避策はありますか？ また、テーブル内の通常の入力テキスト領域を使用する場合にも注意してください。

@ dalexander01 「解決策」が見つかりましたが、md入力コンポーネントを使用していないときに同じ問題が発生していたため、非常にredux形式に固有のようです。 役に立ったらスニペットを投稿できます！

@deycegしてください、それは傷つくことはできません😄。 <Dialog/>と<TextField/>この組み合わせで、この問題が発生するだけです。

      <Dialog
        open={this.props.showDialog}
        title={'New ' + this.props.type}
        autoScrollBodyContent={true}
        actions={actions}
        bodyStyle={styles.dialogContent}
      >
        <SelectField
          name='sub_type'
          value={this.props.top_card.sub_type}
          onChange={(e, k, payload) => this.props.topCardSelectChange('sub_type', payload)}
          floatingLabelText='Type'
        >
          {menuItemsJSX}
        </SelectField>
        <TextField
          name='title'
          className='story-title'
          value={this.props.top_card.title}
          onChange={this.props.topCardChange}
          floatingLabelText='Title'
          fullWidth={true}
          multiLine={true}
          style={styles.title}
        />
        <TextField />
      </Dialog>

私の場合は解決しました。そのテキストフィールドに一意のIDを指定する必要があります。
..。
ただし、再レンダリング後にIDを変更することはできません。 このようにして、Reactはどの要素がフォーカスされているかどうかを追跡できます。
PS myArray.mapを介してレンダリングされる配列にテキストフィールドがあり、再レンダリングするときに同じキーを指定する必要があります。

編集：myArrayの「キー」を再レンダリング間で同じにするだけで、問題が解決しました。
テキストフィールドIDがshortid.generate（）に変更されました。

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

誰かがこの問題の回避策を見つけることができましたか（ refsを使用せずに）？ これは、 onChangeと、 value小道具を状態キーに設定して入力のフォーカスを緩めることの組み合わせのようです。

私も次の問題を抱えていましたが、内部でDropdownMenu https://github.com/callemall/material-ui/blob/ccf712c5733508784cd709c18c29059542d6aad1/src/SelectField/SelectFieldを呼び出している場合は、SelectField実装を使用することで解決しました

そのため、DropDownMenuを追加する必要もあります。これは、内部でコンポーネントをメニューにラップしています。disableAutoFocusを追加して、TextFieldが次のようにフォーカスを維持できるようにしました。

たぶん、SelectFieldからDropDownMenuコンポーネントを公開し、小道具でオートフォーカスを無効にすることができます。

これに苦労していて何かを機能させたいだけの人のための1つの回避策ですが、状況によっては適用できない可能性があり、問題が発生する可能性があります（私自身は完全にはわかりませんが）インスタンスで変数を使用することです状態より。 したがって、 this.state.value代わりに、 onChangeが更新されるのはthis.value onChangeなります。 コンポーネントにはvalue小道具はありません。 次に、 onChangeハンドラーで、 e.target.valueます。

インスタンスの変数と状態の違いは、インスタンス変数が再レンダリングをトリガーしないことだけです。 他にも理由があるかもしれませんが、他の人がこれで私のたるみを捕まえることを願っています。

それでもこのエラーが発生します。 回避策はありますか？

私が見つけた回避策は、shouldComponentUpdate関数をコンポーネントにオーバーライドし、テキストフィールドで使用される状態値を変更するとfalseを返すことでした。

`shouldComponentUpdate(nextProps, nextState) {    

    if(nextState.email != this.state.email) {  

      return false;  

    }

    else if(nextState.password != this.state.password) {  

      return false;  

    }  
    else return true;  
    }

`

この方法でそれを行うと、私の問題が修正されました。 問題は、状態が変化するたびにコンポーネントがレンダリングされ、フォーカスがリセットされることにあるようです。 したがって、上記の関数を使用して、onChangeイベントを実行して状態値を設定するときにレンダリングを無効にすると、コンポーネントはリロードされません。

@ Aspintyl000これは機能します...やや。 'value' propを使用してテキストフィールドの値を設定し、そのpropを 'this.state.value'に設定すると、何も表示されません。 しかし、それを取り除くと、うまくいくようです。

テーブルの行でテキストフィールドを使用していますが、これは問題です:(進捗状況はありますか？

Psid.txt

私も同じエラーが発生していました。 しかし、componentDidMount（）を使用した後{
this.refs.textField.focus（）;
}
フォーカスを失うことはありません。 ただし、入力値は表示されません。

私が追加しようとしました<TextField />で<Table /> 。 上記の状況のように、私は入力に焦点を合わせることができません。
私の解決策： onClickイベントをに追加します 、クリックすると、テーブルのselectable=false設定します。 入力操作の後、 onBlueイベントを使用して、テーブルのselectable=trueを設定します。

かなり不快な行動。

2つの入力ボックスをスタイル付きコンポーネントでラップした後、これを経験しました。 外側のdivは完全に動作を壊しました。 これは、このライブラリの設計におけるひどい欠陥です。

したがって、これはかなりひどい回避策ですが、主に次のように機能します。

「」
onSomeValueChanged =イベント=> {
this.props.someValueChanged（event.target.value）;

const { target } = event;
setTimeout(() => {
  target.focus();
}, 10);

};
「」

ええ、きれいではありません...

@scotmatson 「かなり不快な振る舞い...このライブラリの設計におけるひどい欠陥」。 これはボランティアによって作られたフリーソフトウェアです...しかしstyled-componentsとの関係をよく理解してください。

@scotmatson少なくとも私の場合、ラッパーとして持っているContainer = styled.divを通常のスタイルなしコンポーネントdivに変換すると、問題が解決することを確認できます。

編集：
そして、私もあなたの欲求不満を共有します。 これらの2つのライブラリが完璧に連携していれば本当に素晴らしいでしょう。 この問題と特異性の問題は、私がすぐに解決されることを望んでいる2つのことですが、私は彼らの時間をボランティアしてくれた人々に感謝しています。

Edit2：
私の場合、問題の原因を発見しました。renderメソッドでスタイル付きコンポーネントコンポーネントを宣言します。 これにより、すべての再レンダリングでコンポーネントが再作成され、Reactは再レンダリングの境界を越えてフォーカスされた要素を追跡できませんでした。 これはまた、私にとって他のいくつかの再レンダリングの問題につながりました。

スタイル付きコンポーネントの宣言をすべてコンポーネントの外部に移動することで、フォーカスが失われる問題が解決しました。 おそらく初心者の間違いですが、ここでは誰もそれについて言及していないので、私は戻って報告すると思いました。

私が抱えていると思われる問題は、TextFields（またはInput）がobject.map（）内にレンダリングされているときは常にフォーカスが多いことです。 マップ外のTextFieldsは完全に機能しています。 小道具などが足りませんか？ 私は完全に失われています

私はこのスレッドで提案されているほとんどすべての解決策を運がなくて試しました。

大まかな構造はこちら

メインファイル

...
    function Steps(props) {
      const { steps } = props;
      if(steps) {
        return steps.map((step, index) => (
          <div key={(step.order === '' ? index : step.order)}>
            <NewUxCard step={step} index={index} onChange={props.onChange} 
              onChangeCard={props.onChangeCard} onParamChange={props.onParamChange}/>
          </div>
        ));
      }
    }  

<div>
  <TextField/> //working
  <Steps steps={this.props.ux.steps} onChange={this.onChange} 
              onChangeCard={this.handleChangeCard} onParamChange={this.handleParamChange} /> 
</div>

NewUxCard

...
<div>
  <TextField type="text" fullWidth id={"qq"+this.props.index} label="Name" 
                    value={this.props.step.name} onChange={this.props.onChangeCard('name', this.props.index)} margin="normal" /> //not working - loses focus on each key stroke
</div>

Redux-Reactを使用しているので、状態変化はinput-> action-> reducerを経由することに注意してください。

何か案は？ ありがとう

編集1：
問題をさらに調査し、タグの作成に使用される反応関数Steps（props）を削除することで、問題を絞り込んで解決しました。（この場合）。

だから以前は、構造は->関数Steps（props）->マッピングクラス。 だから今、私は関数（中間の人）を削除し、Constステップ->マッピングクラスだけを削除しました。 なぜこれが機能しているのか（おそらくいくつかの小道具が無視されていたのか）について推測することしかできませんが、それは私のケースを解決しました。

@piltsen .map() TextFieldsをレンダリングしているときにv1.5.0でこの問題が発生しました-入力と同じ値であるTextFieldキーに絞り込んだため、変更するとTextFieldがマウントされる可能性がありました再びそして焦点を失います。 それがあなたに役立つかどうかはわかりません-私は今までにあなたがそれを分類したと確信していますが

これは、レンダープロップを使用した場合の症状でもあります。 のようなことをする

<HigherOrderComponent
    render={hocProps => <TextField value={...} onChange={...} />
/>

この動作を引き起こす可能性があります。 修正するには、設計で許可されている場合は、代わりにフラグメントを渡します。

<HigherOrderComponentThatDoesntPassOwnState
    component={<TextField  {...this.props}/>}
/>

私の場合、フォーカスが失われたわけではないようですが、カーソルがTextFieldから消えます。 document.activeElementがTextFieldと等しいことを確認できます。キーボードコマンドとマウスホイールを使用して値（タイプ番号）を変更できますが、すべてのタイプレデューサーがレンダリングを実行し、カーソルが失われます。

次に、レンダリングの上で、idでTextFieldを検索し、

MyTextField.blur();
MyTextField.focus();

、それは役に立たない。 しかし、タイムアウトを使用してfocus（）を作成すると、機能しているように見えます。

編集：
ええと、HOCの内部ではまだ機能していないので、とにかくそれを押し上げる必要があるようです。

@ younes0私もそれを修正することを確認できます。 私の場合、いくつかの一般的な小道具が設定されたTextFieldを返し、残りの小道具をその上に広げるヘルパーステートレスコンポーネントがあったので、 classNameやvariantなどを指定する必要はありませんvariant複数回。 フォームに変更が加えられるとすぐにテキストフィールドのフォーカスが失われ、ヘルパー関数を削除して、生のTextField何度も何度も修正しました。

これを再開できますか、それとも新しい問題を提出する必要がありますか？

私はまだこの問題を抱えています、私は3.2.0を使用しています

@OmarDavilaP複製で新しい問題を作成できますか？

私の場合は解決しました。そのテキストフィールドに一意のIDを指定する必要があります。
..。
ただし、再レンダリング後にIDを変更することはできません。 このようにして、Reactはどの要素がフォーカスされているかどうかを追跡できます。
PS myArray.mapを介してレンダリングされる配列にテキストフィールドがあり、再レンダリングするときに同じキーを指定する必要があります。

編集：myArrayの「キー」を再レンダリング間で同じにするだけで、問題が解決しました。
テキストフィールドIDがshortid.generate（）に変更されました。

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

うん、それは私の場合の問題を解決します、基本的に私は使用していました：

<NewTextField key={user.id+Math.random()}>
私はそれを次のように置き換えました：

<NewTextField key={user.id}>
したがって、コンポーネントを再レンダリングするたびにランダムなキーを生成するのは悪い習慣のようです。

私にとっての問題は、TextFieldのラッパー関数を作成したことでしたが、コンポーネント関数内でその関数を宣言しました。関数の外に移動すると、すべてが期待どおりに機能しました。

sendboxサンプルを作成しましたhttps://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

条件付きレンダリングでこの問題が発生しています。 レンダリングには、.jsファイルのさまざまなコンポーネントを返すjavascriptオブジェクトがあります。 正しく説明していません、ごめんなさい。 修正したら、覚えていればこの投稿を編集します。

編集：イェーイ、私はそれを修正しました！ 条件付きでレンダリングする方法は、表示されていない場合でも各コンポーネントをレンダリングすることだったと思います。 ロジックをレンダリングの外に移動しましたが、現在は正常に機能しているようです。 古いコードは次のとおりです。

編集：私はこのことでスタイリングすることができないので気にしないでください。

私は今日この問題に遭遇し、数時間頭をぶつけました。 私の場合、間違っていたのは、 TextFieldをステートレスコンポーネントでラップして、ページをより適切に整理することでした（データが読み込まれている場合などはレンダリングしないでください）が、 useStateを残しました親コンポーネントのTextFieldを制御するuseStateコールバック。

後世のために、ここに私の愚かさを再現するための小さなコードサンドボックスリンクがあります：

ここでの問題は、 TextFieldラップするカスタムコンポーネントをどのように作成するかということです。 このバグでは、HOCとcreateElement両方が発生しているようです。

  const MyField= ({ name, ...props }) => (
    <TextField
      fullWidth
      variant="outlined"
      size="small"
      name={name}
      {...props}
    />
  );

  const MyField= ({ name, ...rest }) => {
    return React.createElement(TextField, {
      fullWidth: true,
      variant: "outlined",
      size: "small",
      name: name,
      {...rest}
    });
  };

気にしないでください。上記のアプローチは問題なく機能します。親コンポーネント内でカスタムコンポーネントが定義されていることに気づき、問題が発生しました。 親スコープの外に移動すると（本来あるべきように）正常に動作します-以前のサンドボックスを更新して、正しいアプローチを示しました： https ：

私にとっての問題は、TextFieldのラッパー関数を作成したことでしたが、コンポーネント関数内でその関数を宣言しました。関数の外に移動すると、すべてが期待どおりに機能しました。

sendboxサンプルを作成しましたhttps://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

これが私の問題でした。 ありがとうございました！

気にしないでください。上記のアプローチは問題なく機能します。親コンポーネント内でカスタムコンポーネントが定義されていることに気づき、問題が発生しました。 親スコープの外に移動すると（本来あるべきように）正常に動作します-以前のサンドボックスを更新して、正しいアプローチを示しました： https ：

ありがとうございました。 これはうまくいきました！

私にとっての問題は、TextFieldのラッパー関数を作成したことでしたが、コンポーネント関数内でその関数を宣言しました。関数の外に移動すると、すべてが期待どおりに機能しました。

sendboxサンプルを作成しましたhttps://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

@ fleischman718これを理解してくれてありがとう！ 親コンポーネントの定義内のTextFieldのラッピングコンポーネント関数を削除すると、問題が修正されました。

サンドボックスで何が起こっているのかを理解するのに1秒かかったので、以下に要約を示します。

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

const ParentComponent = () => {

  // DON'T DO THIS!!!
  // fix issue by moving this component definition outside of the ParentComponent
  // or assign the TextField to a variable instead
  const TextFieldWrapper = () => (
    <TextField />
  );

  return (
    <div>
      <TextFieldWrapper />
    </div>
  )
}