Блог

Главная - Вопросы по программированию - Как передать значение formik initialState в качестве параметра функции

Как передать значение formik initialState в качестве параметра функции

#javascript #reactjs #formik

Вопрос:

Я использую Formik в своем приложении React и не уверен, как передать значение Formik в качестве параметра в функцию.

Допустим, у меня есть следующие значения Formik:

 "props": {
    "myJobName": "ABC"
 }

В моем теге кнопки, который все живет в моих <Formik> <Form> тегах и, я пытаюсь позвонить setJobContent и передать values.myJobName 

               <Button
                onClick={()=> {
                          setJobContent({values.myJobName})
                        }}
              />
              Click
              </Button>

У меня также есть следующая функция за пределами моих <Formik> <Form> тегов и:

 const setJobContent = (jobName) => {
 // do something 
 // return something
}

Не уверен, возможно ли это, и если да, был бы признателен за вашу помощь.

Ответ №1:

если вы хотите получить только «myJobName» в функции setJobContent, вам нужно пройти setJobContent(values.myJobName) вот так.

Комментарии:

1. К сожалению, когда я делаю это и регистрирую результат параметра в консоли, он равен нулю, т. Е. values.myJobName — может ли это быть связано с тем, что это функция вне Formik тегов?

2. Функция вне тегов Formik в вашем случае не имеет значения, потому что вы переходите values.myJobName в функцию setJobContent, поэтому при нажатии на кнопку вы получите значение myJobName в функции seJobContent. Убедитесь, что вы используете initialValues={{ myJobName: 'ABC' }} в Formik.

Ответ №2:

Это то поведение, которого вы хотели? https://codesandbox.io/live/jpr5fj3

 export default function App() {

const setJobContent = (jobName) => {
    alert(jobName);
};



return (
  <div className="App">
    <Formik initialValues={{ myJobName: "test" }}>
      {({ values, handleChange }) => (
        <form>
          <input
            type="text"
            name="myJobName"
            onChange={handleChange}
            value={values.myJobName}
           />

          <em>{JSON.stringify(values, null, 2)}</em>
        <button
          type="button"
          onClick={() => setJobContent(values.myJobName)}
        >
          Submit
        </button>
      </form>
    )}
  </Formik>
</div>
);
}`
Метки: