在 react-bootstrap-typeahead 中设置值

Question

首先，让我承认我是 React 新手...

我想设置在这个组件中显示和选择的值在第一次渲染之后（例如从一个按钮）

这是我的测试代码（删除了导入等）

$(function () {
    const data = [
        {
        DataID: 1,
        DataType: 'Data1'
        },
        {
            DataID: 2,
            DataType: 'Data2'
        },
        {
            DataID: 3,
            DataType: 'Data3'
        },
        {
            DataID: 4,
            DataType: 'Data4'
        }
    ]

    ReactDOM.render(
        <SelectionsExample
            options={data}
            preset={[data[1]]}
        />,
        document.getElementById('divExampleSelector')
    )
});


function SelectionsExample(props) {
    const [options, setOptions] = useState(props.options);
    const [preset, setPreset] = useState(props.preset);

    function handleSelect(s) {
        console.log((s ? s.DataType : 'Nothing') + ' selected');
    }
    function handlePreset() {
        let s = options[2];
        console.log('Preset', s);
        setPreset([s]);
    }

    return (
        <>
            <Typeahead
            id="selections-example"
            options={options}
            defaultSelected={preset ?? []}
            onChange={(s) => handleSelect(s[0])}
            labelKey="DataType"
            clearButton
                placeholder="Choose a value..."
            />
            <Button
                onClick={handlePreset}
                variant="outline-secondary">Preset </Button>
       </>
    )
}

在第一次渲染时，一切正常，如预期的那样，我的选项列表中显示了第二项。

但是当我单击“预设”按钮时，handlePreset 运行但控件中没有任何变化。我本来希望选择更改为选项的值[2]。

如果我将 Typeahead 道具 'defaultSelected' 更改为 'selected'，那么我唯一可以选择的项目就是我在 'preset' 道具中传入的项目。

我做错了什么？

Answer 1

使用defaultSelected 会使预输入不受控制，并且只会在组件安装时显示预设选择。由于您希望以后能够更改预设，因此您应该使用selected 来控制预输入：

function SelectionsExample(props) {
  const [selected, setSelected] = useState(props.preset);

  function handleSelect(s) {
    console.log((s[0] ? s[0].DataType : 'Nothing') + ' selected');
    setSelected(s);
  }

  function handlePreset() {
    let s = props.options[2];
    console.log('Preset', s);
    setSelected([s]);
  }

  return (
    <>
      <Typeahead
        clearButton
        id="selections-example"
        labelKey="DataType"
        onChange={handleSelect}
        options={props.options}
        placeholder="Choose a value..."
        selected={selected}
      />
      <button onClick={handlePreset}>
        Preset
      </button>
    </>
  );
}

工作沙盒：https://codesandbox.io/s/heuristic-haze-3vugt