javascript - 提前输入/预测测试功能有问题

我正在使用 material-table 并且我决定实现 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

最佳答案

不确定 MTableEditField 的自定义，但是您可以尝试通过编写自己的组件来执行以下操作。

1) 主要思想是拆分单词(原始和建议)并将它们分开 span 元素，以便我们可以完全控制样式。

2) 将 span 元素包裹在 div 中，并编写自己的 onChange 事件处理程序。

PS:这是示例代码，需要微调代码。

查看 working sample on 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;

关于javascript - 提前输入/预测测试功能有问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60340215/