在react-bootstrap-typeahead

问题描述

首先，让我承认自己是一名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”，那么我唯一可以选择的项目就是我在“预设”道具中传递的一项。

我在做什么错了？

解决方法

使用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