无法获取 Typeahead 值

Question

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

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

Answer 1

这是工作代码。 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'));

Answer 2

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

查看库的示例，您似乎没有 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 和可能的变体）。

Answer 3

来自文档：

<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 */ ]}
/>