从 Formik Select 访问 Select 文本值

Question

我正在使用教程中的以下代码作为 Material-UI select:

的可重用组件

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;

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

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

无论如何我也可以从

访问文本值

const { innerText } = evt.nativeEvent.target;

在 App.js 组件中，因为我还需要在我的 select 列表中获取国家 name/text？

我只需要从用户创建的 selection 中检索文本值并将其存储在状态中。

Answer 1

这应该有效：

在 app.js 文件中定义一个状态来保存子组件的 innerText 值（在本例中为 Select.js）。

const [innerTextSync, setInnerTextSync] = useState('')

定义一个函数来更改 app.js:

const updateInnerTextSync=(input)=>{setInnerTextSync(input)}

将此函数作为 prop 传递给 Select.js

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

在 Select.js 文件的 handleChange 函数中，通过调用您之前传入的函数更新应用程序状态。

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

现在您的应用文件中应该可以使用 innerText。

从 Formik Select 访问 Select 文本值

Accessing Select Text Value from Formik Select

javascript

select

reactjs

material-ui

formik