从formik内部的组件中设置formik值。

Question

我正在使用formik，我有一个输入，可以从一个自动完成器和一个位于formik内部的组件中编辑。

它是这样的：

<Formik
          initialValues={endUserLocationEdit}
          onSubmit={saveEndUserLocation}
        >
          {props => {
            const {
              values,
              touched,
              errors,
              status,
              isSubmitting,
              validateParcelContainer,
              setFieldValue,
              handleChange,
              handleSubmit,
              handleBlur

            } = props;

            return (<form className="form" onSubmit={handleSubmit}>

             <Autocomplete
                    fullWidth
                    id="rulLocationFk"
                    name="rulLocationFk"
                    value={values.rulLocationFk}
                    onChange={(event, newValue) => setFieldValue("rulLocationFk", newValue)}
                    onInputChange={(event, newInputValue) => {
                      searchLocation(values.locStatePk, newInputValue);
                    }}
                    getOptionSelected={(option, value) => value != null ? option.locName === value.locName : null}
                    getOptionLabel={(option) => option.locName}
                    options={locationList}
                        error={errors.locStatePk && touched.locStatePk}
                        renderInput={(params) => <TextField {...params} label="Location" variant="outlined" />}
                      />

         <MapCaller  > </MapCaller>

如您在“自动完成”中所看到的，我使用setFieldValue编辑value={values.rulLocationFk}

现在，在formik中，我还有一个可以编辑values.rulLocationFk值的组件

我像这样调用formik中的组件：

<MapCaller  > </MapCaller>

如何将参数values.rulLocationFk传递给MapCaller，并在MapCaller中编辑它？

我想大概是：

  <MapCaller location={values.rulLocationFk} setLocation={setFieldValue} > </MapCaller>

但那不起作用

谢谢

Answer 1

我同意上面的评论。

还有一个想法:这并不能完全解决您正在使用的实现，但是我喜欢在formik之外使用访问值的一个快速模式是将ref设置为innerRef属性，然后可以使用ref访问formik值。

const formikRef = useRef(null)
<Formik
  innerRef={formikRef}
  initialValues={{
   valueName = "",
  ...

and then you can grab 
formikRef.current.values.valueName