先行入力/予測テスト機能に問題があります

マイクK：

私が使用している材料・テーブルを、私はGoogleが持っている機能の「先行入力」の種類を実施することを決定しました。このようなもの：

これを実現するために、私はラップMTableEditFieldのようになります私自身の持つコンポーネントを、：

import React, { useState } from "react";
import { MTableEditField } from "material-table";

const CustomTableEditField = props => {
  const [rawValue, setRawValue] = useState(props.value);
  const [suggestedValue, setSuggestedValue] = useState("asdasda");

  const handleOnChange = value => {
    // ... logic to find best match and set state values
  };

  return (
    <MTableEditField
      inputProps={
        suggestedValue
          ? {
              style: {
                backgroundColor: "#557D92",
                color: "white",
                padding: "offset"
              }
            }
          : {}
      }
      {...props}
      value={suggestedValue ?? rawValue}
      onChange={handleOnChange}
    />
  );
};

export default CustomTableEditField;

問題は価値があった場合、それはのように見えるということです。

私は試合があるだろうならば、それは全体の背景を変更する必要はありません。私はそれに追加提案したテキストで、既に入力したテキストを保存しておきたいです。

私はサイズを変更することができ、画像として扱われる勾配、に見えたが、私はレンダリングするための何かを得ることができませんでした。

これは、すべてで行うことは可能である、または私はちょうど私の時間を無駄にしていますか？

編集します

Stackblitz

シヴァKondapiヴェンカタ：

カスタマイズわからないMTableEditField、しかし、あなたは、独自のコンポーネントを書き込むことによって、次のようないくつかのことを試すことができます。

1）主なアイデアは、）（生と提案単語を分割し、それらを別々に保つているspan私たちがスタイリングの完全な制御を取得することができますので、という要素を。
2）ラップspanの要素をdivし、自分の書き込みonChangeイベントハンドラを。

PS：これはサンプルコードで、微調整するコードが必要です。

チェックアウトstackblitzに取り組んでサンプルを

import React, { useState } from "react";

const dict = ['apple', 'mango', 'berry'];

const CustomTableEditField = props => {
  const [rawValue, setRawValue] = useState("");
  const [suggestedValue, setSuggestedValue] = useState("");

  const handleKeyPress = (event) => {
    // console.log('key: ', event.key);
    let new_raw;
    if (event.key === "Backspace") {
      new_raw = rawValue.slice(0, rawValue.length - 1);
    } else {
      new_raw = `${rawValue}${event.key}`;
    }
    setRawValue(new_raw);

    const suggested = dict.find(word => word.startsWith(new_raw));
    if (suggested && new_raw) {
      setSuggestedValue(suggested.slice(new_raw.length));
    } else {
      setSuggestedValue("");
    }
  }

  return (
    <div
      tabIndex="0"
      onKeyDown={handleKeyPress}
      style={{border: '1px solid green', height: '30px', color: 'black'}}>
      <span>{rawValue}</span>
      {suggestedValue && (
          <span 
            style={{backgroundColor: "#557D92",
            color: "white",
            padding: "offset"}}> {suggestedValue} </span>
      )}
      </div>
  );
};

export default CustomTableEditField;