Javascript 使用React引导打印头时出现的问题

我正在用react bootstrap打字机制作一个打字机，结果遇到了一个打字机错误

详细信息： 我可以成功地在字段中键入、筛选选项并使用菜单，但是，选择一个选项后，页面变为空白并显示此错误：

“TypeError:无法读取未定义的属性'onChangeState'”

---

据我所知，有几个问题

我不确定关于

StateInput

，您在哪里定义了

onChangeState

，但是发生了错误，因为

此

未正确绑定，因此未定义。如果方法来自父组件，则应将其作为prop（

props.onChangeState

）传入

typeahead传递给

onChange

的参数实际上不是事件

React Bootstrap Typeahead不接受

值

prop，因此

setSelected

在那里没有做任何事情

以下方面应起作用：

const StateInput = (props) => {
  const [selected, setSelected] = useState([]);

  return (
    <Typeahead
      id="basic-typeahead-example"
      labelKey="state"
      onChange={setSelected}
      options={[
        { state: 'AL' },
        { state: 'AK' },
        { state: 'AZ' },
        { state: 'AR' },
        { state: 'CA' }
      ]}
      placeholder="Choose a state..."
      selected={selected}
    />
  );
};

const StateInput=（道具）=>{
const[selected，setSelected]=useState（[]）；
返回(
);
};

我找到了您的帖子，因为我试图实现在更改时获取数据，并使用值作为获取数据的查询（选项，在Typeahead中）。对于这种情况，AsyncTypeahead在我的情况下工作得更好，其中

onSearch

与典型的

onChange

具有相同的行为

请参阅此处的更多信息：

function StateInput() {

  const [selected, setSelected] = useState([]);

  return (
    <>
      <Typeahead
        id="basic-typeahead-example"
        labelKey="state"
        onChange={(e) => this.onChangeState(e)}
        options={[
          { state: 'AL' },
          { state: 'AK' },
          { state: 'AZ' },
          { state: 'AR' },
          { state: 'CA' }
        ]}
        placeholder="Choose a state..."
        selected={selected}
        value={setSelected}
      />
    </>
  )
}

  onChangeState(e) {
    this.setState({
      state: e.target.value
    })
  }

const StateInput = (props) => {
  const [selected, setSelected] = useState([]);

  return (
    <Typeahead
      id="basic-typeahead-example"
      labelKey="state"
      onChange={setSelected}
      options={[
        { state: 'AL' },
        { state: 'AK' },
        { state: 'AZ' },
        { state: 'AR' },
        { state: 'CA' }
      ]}
      placeholder="Choose a state..."
      selected={selected}
    />
  );
};