Reactjs 无法获取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}
    />

OnChange方法：

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

---

除非我误解了您正在做的事情，或者示例中缺少代码，否则是否要将从该组件中选择的值设置为正确

查看库中的示例，您似乎没有

onChange

prop，理想情况下您可以在其中设置该值。所以试试这个：

console.log（'SET VALUE HERE！'，VALUE）}
value={values.options}
/>

---

编辑：请注意与表单相关的组件一般来说，您可能希望在事件中执行与设置和存储值相关的任何操作（因此

onChange

及其可能的变体）。

以下是工作代码。这里我根据您的需求修改了代码，现在您可以从

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'));

import React，{useffect，useRef，useState}来自'React'；
从'react bootstrap Typeahead'导入{Typeahead}；
从“react dom”导入react dom；
从“./data”导入选项；
导入'react bootstrap typeahead/css/typeahead.css'；
导入“./styles.css”；
常量TypeaheadExample=（）=>{
const[selected，setSelected]=useState（[]）；
const refHidden=useRef（null）；
const onChange=（名称）=>（值）=>{
如果（value.length>0）{
const e=新事件（'input'，{bubbles:true}）；
setNativeValue（refHidden.current，值[0]。大写）；
refHidden.current.dispatchEvent（e）；
}
};
函数setNativeValue（元素，值）{
常量valueSetter=Object.getOwnPropertyDescriptor（元素，'value'）.set；
const prototype=Object.getPrototypeOf（元素）；
常量prototypeValueSetter=Object.getOwnPropertyDescriptor(
原型，
“价值”
).设置；
if（valueSetter&&valueSetter！==prototypeValueSetter）{
调用（元素，值）；
}否则{
调用（元素、值）；
}
}
功能手柄更改（e）{
console.log（e.target.name）；
console.log（如target.value）；
}
//{（text，e）=>{console.log（text，e）；}
返回(
);
};
ReactDOM.render（，document.getElementById（'root'））；

来自文档：

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

{values.tags=selected}}/>

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

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

{
//处理选择。。。
}}
选项={[/*对象或字符串数组*/]}
/>

代码段中没有console.log。您缺少onChange事件。@Sam如果添加onChange，则会出现此错误：

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

@buzatto位于code@BruceWayne你能把你的更改代码写下来吗？嗨，七月，我会尽快尝试的，我有机会，明天早上。非常感谢您的回答..将更新我刚刚测试的结果，正如我所想，并通过添加onChange之前测试过的一样，它给了我以下

错误：TypeError:无法读取未定义的属性“name”

@BruceWayne您是否试图在某处访问

name

属性？它不在原始帖子的更新代码中。另外，

onChange

函数中的

值是什么？在另一个类似这样的文件中：
const onChange=（event）=>{setValues（{…values，[event.target.name]：event.target.value}；}然后在我的帖子页面中，onchange is方法的调用方式如下：const{values，onchange，onSubmit}=
useForm（createPostCallback，{value:''，}）
@BruceWayne很难通过评论来理解，因此请更新帖子，并将所有这些代码包含在失败的地方。我的onchange如下：
const{values，onchange，onSubmit}=useForm（createPostCallback，{value:，}）我如何修改它以获得实际值？您能否创建/更新codesandbox？以及您的onChange方法是什么样子？更新后，请采取另一种方法look@BruceWayne给我发送codesandbox的链接，我在我的codesandbox上没有看到它。我更新了问题，它在问题“如何在onChange字段中获取事件？”中？。根据您的情况，您有一个接受事件和更新状态的通用方法。
<Typeahead
  onChange={(selected) => {
    // Handle selections...
  }}
  options={[ /* Array of objects or strings */ ]}
/>