React rsuite reset选择框值

Question

我有rsuite SelectBox，我想从外部重置它的值。当我将其设置为null、undefined或空字符串时，它不起作用
我读了源代码，我觉得它是设计出来的，只有当你把它作为表单的一部分使用时。但这会使事情变得复杂。你认为有任何可能的方法可以在不创建窗体的情况下重置组合值吗
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>
</>
);
}

感谢

Answer 1

您可以使用defaultValue道具来设置SelectPicker的初始值。

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

但是，根据我的经验，如果defaultValue在外部更改，则不会更新。为此，您需要按照MWO的另一个答案进行操作，并强制重新安装组件。

您只需更改关键道具就可以做到这一点，这将迫使React创建一个新的组件实例。将关键道具设置为您的值，它将在更改时重新安装。

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

Answer 2

我知道它不太好，也不知道它需要什么道具，但你可以点击按钮完全卸载/装载它。

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>
</>
);
}

Answer 3

我所做的是从外部清除所选值(当选择单独的CheckPicker时，我会触发它(，就是设置SelectPicker值，并在我想要清除所选的值时重置它。当SelectPicker通过onOpen＝｛resetFilteredData｝打开时，我还在外部重置CheckPicker中的数据。

const [selectPickerValue, setSelecPickerValue]=useState([]);

// use onSelect to fire a function that sets the picker value
const tableFilter = (a) => {
setSelectPickerValue(a);
}
// this is being invoked from my CheckPicker onOpen
const resetPeople = () => {
setSelecPickerValue([]);
}
<SelectPicker
label="People"
data={people} 
labelKey="name" 
valueKey="id" 
onSelect={tableFilter}
onClean={resetTable}
className="mb-3 select-picker"
onOpen={resetFilteredData}
value={selectPickerValue}
/>