javascript - reactjs - redux 表单和 Material ui 框架 - 具有自动类型 - 和清除字段功能

Question

我正在构建一个使用 redux 表单和 Material ui 框架的嵌套表单框架——到目前为止，我已经在这里构建了组件 - https://codesandbox.io/s/heuristic-hopper-lzekw

我想做的是 - 将一些“动画”附加到字段 - 模仿输入 - 我已经通过一个小函数实现了这一点，该函数将获取初始文本并逐句通过字符 - 更新 Prop 该字段的初始值。

现在我遇到的问题是——我需要在 textField 上创建一个 onClick——如果它是一个自动 typetext 字段——将值重置为空字符串——将这个 onclick 传递回父 shell——甚至回到 typetext 函数来打破超时——所以如果用户加载页面，他们会看到文本输入——但随着 UI 功能的改进——如果我在动画中间单击该字段——我希望动画停止/中断，我希望该字段清除。

我还想控制哪些字段应该被清除——所以在这种情况下——有一个参数——指示 onClickClear: true——以免破坏用户编辑配置文件预填表单。

===没有 typetext 的沙箱——但是如何将这两个框架粘合在一起的良好基础 https://codesandbox.io/s/heuristic-hopper-lzekw?file=/src/Home.js

== 这是最新的自动输入沙盒 https://codesandbox.io/s/amazing-bell-z8nhf

var self = this;
typeAnimation(this.state.initial_search_term.search_term, 100, function(msg){
  self.setState({
    initial_search_term: {"search_term": msg}
  });
});

Answer 1

我认为使用输入引用更新占位符属性是一个很好的解决方案，这样你就不需要更新输入值(避免组件重新渲染)，并且你可以在点击事件中清除占位符文本:

首页.js

class Home extends Component {
  constructor(props, context) {
    super(props, context);
    this.searchInputRef = React.createRef(null);
    this.state = { initial_search_term: { search_term: "" } };
  }

  componentDidMount() {
    var self = this;
    typeAnimation("Start typing...", 100, function (msg) {
      if (document.activeElement !== self.searchInputRef.current) {
        self.searchInputRef.current.setAttribute("placeholder", msg);
      } else {
        return true; // stop typings
      }
    });
  }


  render() {
    //...

    let fieldsSearchForm = [
      {
        id: "search-field",
        type: "text",
        label: "Search Term",
        name: ["search_term"],
        options: [],
        fieldRef: this.searchInputRef,
        onClick: () => (this.searchInputRef.current.placeholder = "")
      }
    ];
   //...
  }
}

FieldMaker.js

class FieldMaker extends Component {
  //...

  
  render() {
   
    return (
      <>
        {this.state.fields.map((item, j) => {
          if (item.visibility) {
            if (item.type !== "checkbox") {
              return (
                <Field
                  id={item.id}
                  //...other props
                  fieldRef={item.fieldRef}
                  onClick={item.onClick}
                />
              );
            } else {
              //...
            }
          } else {
            //...
          }
        })}
      </>
    );
  }
}

渲染文本字段.js

const renderTextField = ({
  id,
  input,
  rows,
  multiline,
  label,
  type,
  meta: { touched, error, warning },
  onClick,
  fieldRef
}) => (
  <FormControl
    component="fieldset"
    fullWidth={true}
    className={multiline === true ? "has-multiline" : null}
  >
    <TextField
      id={id}
      inputRef={fieldRef}
      onClick={onClick}
      // other props
    />
  </FormControl>
);

实用程序.js

export async function typeAnimation(text, timing, callback) {
  let concatStr = "";
  for (const char of text) {
    concatStr += char;
    await sleep(timing);
    const shouldStop = callback(concatStr);
    if (shouldStop) break; // stop the loop
  }
}

样式.css//保持占位符可见

#search-field-label {
  transform: translate(0, 1.5px) scale(0.75);
  transform-origin: top left;
}

#search-field::-webkit-input-placeholder {
  opacity: 1 !important;
}