无法获得 Typeahead 值

如何解决无法获得 Typeahead 值

我正在尝试从这个库中创建一个标签输入输入：

import { Typeahead } from 'react-bootstrap-typeahead';

在我的 reactjs 应用中：

<Typeahead
    allowNew
    id="custom-selections-example"
    multiple
    newSelectionPrefix="Add a new item: "
    options={opt}
    placeholder="Autocomplete"
    name="tags"
    onChange={onChange}

    value={values.options}
    />

当我选择其中一个选项时，console.log(values.options)-> 语句不返回任何内容...

有人可以告诉我获取价值的方法吗？

更新 我之前用 onChange 函数测试过，并给出了以下错误：

TypeError: Cannot read property 'name' of undefined

OnChange 方法：

const { values,onChange,onSubmit } = useForm(createPostCallback,{
        tags:''
    })
 const [createData,{ error }] = useMutation(CREATE_QUERY,{
    variables: values,...code continues

解决方法

这是工作代码。 https://codesandbox.io/s/wonderful-sanderson-eg0g8?file=/src/index.js:0-648。这里我根据您的要求修改了代码，现在您可以从 handleChange 方法调用您的父 onChange 方法。

import React,{ useEffect,useRef,useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import ReactDOM from 'react-dom';

import options from './data';

import 'react-bootstrap-typeahead/css/Typeahead.css';
import './styles.css';

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

  const refHidden = useRef(null);

  const onChange = (name) => (values) => {
    if (values.length > 0) {
      const e = new Event('input',{ bubbles: true });
      setNativeValue(refHidden.current,values[0].capital);
      refHidden.current.dispatchEvent(e);
    }
  };
  function setNativeValue(element,value) {
    const valueSetter = Object.getOwnPropertyDescriptor(element,'value').set;
    const prototype = Object.getPrototypeOf(element);
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
      prototype,'value'
    ).set;

    if (valueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element,value);
    } else {
      valueSetter.call(element,value);
    }
  }
  function handleChange(e) {
    console.log(e.target.name);
    console.log(e.target.value);
  }
  //{(text,e) => { console.log(text,e); }}
  return (
    <>
      <Typeahead
        id="basic-example"
        onChange={onChange('basic')}
        options={options}
        placeholder="Choose a state..."
        selected={selected}
      />
      <input
        ref={refHidden}
        style={{ display: 'none' }}
        name="control_Name"
        onChange={handleChange}
      />
    </>
  );
};

ReactDOM.render(<TypeaheadExample />,document.getElementById('root'));

,

除非我误解了您在做什么或者您的示例中缺少代码，否则您想将从该组件中选择的值设置为正确吗？

查看库的示例，您似乎没有 onChange 属性，理想情况下您将设置该值。所以试试这个：

<Typeahead
    allowNew
    id="custom-selections-example"
    multiple
    newSelectionPrefix="Add a new item: "
    options={opt}
    placeholder="Autocomplete"
    name="tags" 
    onChange={(value) => console.log('SET VALUE HERE!',value)}
    value={values.options}
    />

编辑：注意一般的表单相关组件，您可能想要做任何与在事件中设置和存储值相关的事情（因此 onChange 及其可能的变体）。

,

来自文档：

<Typeahead
    allowNew
    id="id"
    multiple
    newSelectionPrefix="Add a new item: "
    options={opts}
    placeholder="Autocomplete tags"
    onChange={(selected) => { values.tags = selected  }}   />

typeahead 的行为类似于其他表单元素。它需要过滤和显示一组数据选项。

<Typeahead
  onChange={(selected) => {
    // Handle selections...
  }}
  options={[ /* Array of objects or strings */ ]}
/>