在输入中键入的每个字母都在引起React QueryBuilder中的重新启动组件

Question

我使用的是用材料图的React查询构建器，并且在Valueeditor中发现了一个错误，在Textfield中，每个键入的字母都会引起重新启动。

这是使用valueeditor中的常规输入的同一事物的代码盒示例。 https://codesandbox.io/s/srcy/s/oditj?file=/src/src/src/ app.tsx

有人知道如何解决此问题？ 我很感谢任何类型的帮助 谢谢

Answer 1

只需在 app 组件之外移动 valueeditor 组件，因为它是在每个“应用”渲染中重新创建的，这会触发另一个渲染。

之前：

  const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({
    id: 'root',
    combinator: 'and',
    rules: [],
  });

  const ValueEditor = ({ handleOnChange, value }: ValueEditorProps) => (
    <input
      type="text"
      onChange={(e) => handleOnChange(e.target.value)}
      value={value}
    />
  );

  return (
    <QueryBuilder
      fields={[{ name: 'test', label: 'Test' }]}
      controlElements={{ valueEditor: ValueEditor }}
      onQueryChange={(q) => setQuery(q)}
      query={query}
    />
  );
};

之后：

const ValueEditor = ({ handleOnChange, value }: ValueEditorProps) => (
  <input
    type="text"
    onChange={(e) => handleOnChange(e.target.value)}
    value={value}
  />
);

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: []
  });

  return (
    <QueryBuilder
      fields={[{ name: "test", label: "Test" }]}
      controlElements={{ valueEditor: ValueEditor }}
      onQueryChange={(q) => setQuery(q)}
      query={query}
    />
  );
};

演示：