具有预输入/预测测试功能麻烦

迈克·K:

我使用的材料表,我决定实施“预输入”那种功能,谷歌了。事情是这样的:

IMG1

为了实现这一点,我的包裹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;

问题是,当有一个价值,它看起来像:

IMG2

我不希望它改变整个背景是否会有一场比赛。我希望它保持已键入的文本,用附加到它建议文本。

我看着梯度,这被视为是可以调整大小的图像,但我没能得到任何渲染。

这是有可能的话做,还是我只是在浪费我的时间?

编辑

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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何编写具有大量输入和大量输出的功能的Gherkin测试?

来自分类Dev

在输入数据中具有多个特征的时间序列预测

来自分类Dev

具有“ gp”平滑功能的GAM:在新位置进行预测

来自分类Dev

具有通用输入参数的功能

来自分类Java

具有模拟用户输入的JUnit测试

来自分类Dev

具有Bootstrap标签输入和预输入的Bootstrap 3不显示输入中的标签

来自分类Python

类方法具有内置输入功能(Python)的

来自分类Dev

具有相同输入的相同功能返回不同的值

来自分类Java

具有rewind()/ reset()功能的Java文件输入

来自分类Dev

Golang-具有多种输入类型的功能

来自分类Dev

具有禁用和启用输入功能的单选按钮

来自分类Dev

GO:具有不同类型输入的模型(或接口)功能

来自分类Dev

具有面部检测和形状预测功能的Dlib网络摄像头捕获速度很慢

来自分类Dev

经过Caffe预训练的模型,具有较大的输入图像尺寸

来自分类PHP

测试以断言选择输入中具有特定选项

来自分类Javascript

使用jQuery测试输入是否具有焦点

来自分类Dev

测试具有多个输入的Click应用程序提示

来自分类Java

具有不可预测的外部依赖关系的单元测试代码

来自分类Dev

ConvNet具有98%的测试准确度,总是在预测中出错

来自分类Dev

如何使用具有MRF平滑和邻域结构的GAM预测测试数据?

来自分类PHP

具有模拟功能的PHPUnit测试覆盖率API

来自分类Dev

具有下载功能的无头浏览器测试?

来自分类Java

具有继承和混合功能的Scala可测试代码

来自分类Dev

具有依赖项注入的测试包装功能

来自分类Java

具有扫描仪类的麻烦

来自分类Python

由于采用了具有“NameError”麻烦

来自分类Dev

在功能之间使用用户输入时遇到麻烦

来自分类Dev

Numba的jit无法编译具有另一个功能作为输入的功能

来自分类Python

具有LSTM单元的Keras RNN可基于多个输入时间序列预测多个输出时间序列

TOP 榜单

热门标签

归档