Javascript 从Formik Select访问Select文本值

我使用教程中的以下代码作为材质UI选择的可重用组件：

import React from 'react';
import { TextField, MenuItem } from '@material-ui/core';
import { useField, useFormikContext } from 'formik';

const SelectWrapper = ({
  name,
  options,
  ...otherProps
}) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(name);

  const handleChange = evt => {
    const { value } = evt.target;
    const { innerText } = evt.nativeEvent.target;
    setFieldValue(name, value);
  };

  const configSelect = {
    ...field,
    ...otherProps,
    select: true,
    variant: 'outlined',
    fullWidth: true,
    onChange: handleChange
  };

  if (meta && meta.touched && meta.error) {
    configSelect.error = true;
    configSelect.helperText = meta.error;
  }

  return (
    <TextField {...configSelect}>
      {Object.keys(options).map((item, pos) => {
        return (
          <MenuItem key={pos} value={item}>
            {options[item]}
          </MenuItem>
        )
      })}
    </TextField>
  );
};

export default SelectWrapper;

在my App.js中使用此Select.js组件时，即：

<Grid item xs={12}>
  <Select
    name="country"
    label="Country"
    options={countries}
   />
</Grid>

我是否也可以从中访问文本值

const{innerText}=evt.nativeEvent.target

在App.js组件中，因为我还需要在选择列表中获取国家名称/文本

我只需要从用户所做的选择中检索文本值并将其存储在状态中。

这应该可以：

在app.js文件中定义一个状态，以保存子组件Select.js中的innerText值。 常量[innerTextSync，setInnerTextSync]=useState

定义更改app.js中状态的函数： const updateInnerTextSync=input=>{setInnerTextSyncinput}

将此函数作为道具传递到Select.js

---

现在innerText应该可以在你的应用程序文件中找到了。

做得很好-这就成功了。需要注意的是，我还需要将updateInnerTextSync作为一个道具传递到Select.js组件中，即const SelectWrapper={name，options，updateInnerTextSync，…otherprops作为我的新手，这是将值从Select.js传递回App.js的唯一方法吗？这是我知道的唯一方法。还有一个问题，我有几个调用use Select.js，但我不需要检索所有Select组件的innerText值。我怎么能不能o仍在调用且不需要updateInnerTextSync，因为此时，我收到一个错误，因为它需要此道具？请注释在句柄更改函数中调用updateInnerTextSync的位置。您也可以将其从传递到标记的属性中排除。

<Select
    name="country"
    label="Country"
    options={countries}
    updateInnerTextSync={updateInnerTextSync}
/>

const handleChange = evt => {
    const { value } = evt.target;
    const { innerText } = evt.nativeEvent.target;
    setFieldValue(name, value);
    updateInnerTextSync(innerText)
  };