0

我有rsuite SelectBox，我想从外部重置它的值。当我将它设置为nullorundefined或空字符串时，它不起作用。
我阅读了源代码，我觉得它是设计使然，只有当您将它用作表单的一部分时。但这使事情变得复杂。您是否看到任何可能的方法来重置组合值而不创建表单？
https://codesandbox.io/s/select-picker-types-forked-ivjn8?file=/src/App.tsx:164-477

export default function App() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <>
      <SelectPicker
        data={[{ label: "test", value: "test" }]}
        value={value}
        onChange={setValue}
      />
      <button onClick={() => setValue("")}>reset</button>
    </>
  );
}

谢谢

4

2 回答 2

1

我知道它不是那么甜蜜，我不知道这个需要什么道具，但是您可以在单击按钮时完全卸载/安装它。

import { useState, useEffect } from "react";
import { SelectPicker, Button } from "rsuite";
import "./styles.css";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [value, setValue] = useState<string | undefined>("");
  const [down, setDown] = useState(false);

  useEffect(() => {
    setValue("");
    console.log(down);
  }, [down]);

  return (
    <>
      {!down ? (
        <SelectPicker
          data={[{ label: "test", value: "test" }]}
          value={value}
          onChange={setValue}
        />
      ) : (
        <SelectPicker value={""} />
      )}
      <br />
      <br />
      <button
        onMouseUp={() => setDown(false)}
        onMouseDown={() => setDown(true)}
      >
        reset
      </button>
    </>
  );
}
于 2022-02-06T18:56:41.677 回答
1

您可以使用 defaultValue 属性设置 SelectPicker 的初始值。

<SelectPicker
        data={[{ label: "test", value: "test" }]}
        defaultValue={value}
        onChange={setValue}
      />

但是，根据我的经验，如果从外部更改 defaultValue，这将不会更新。为此，您需要按照 MWO 的另一个答案建议执行并强制重新安装组件。

你可以很简单地通过改变 key prop 来强制 React 创建一个新的组件实例。将 key prop 设置为您的值，它会在更改时重新安装。

<SelectPicker
        key={value}
        data={[{ label: "test", value: "test" }]}
        defaultValue={value}
        onChange={setValue}
      />
于 2022-02-23T17:57:12.710 回答