Как установить значение поля formik - PullRequest
Новая
       6

Как установить значение поля formik

0 голосов
/ 03 апреля 2020

Я пытаюсь загрузить сохраненные значения в форму formik, чтобы их можно было обновить. Ниже приведен мой подход 

<Formik
          initialValues={{
            name: ''
          }}
          render={({ errors, status, touched, setFieldValue, isSubmitting, values }) => (
            <>
              <div className="col-md-6">
                <form className="form-horizontal">
                  <div className="card-body">
                    <div className="form-group row">
                      <label htmlFor="nameLabel" className="col-sm-2 col-form-label">Name</label>
                      <div className="col-sm-10">
                        <Field
                          value={values.name}
                          name="name"
                          type="text" placeholder="Location name"
                          className={'form-control' + (errors.name && touched.name ? ' is-invalid' : '')} />
                        <ErrorMessage name="name" component="div" className="invalid-feedback" />
                      </div>

                    </div>
                  </div>
                </form>
              </div>
              <div className="col-md-6">
                <table className="table table-striped projects">
                  <thead>
                    <tr>
                      <th >
                        Name
      </th>
                      <th>
                        Adress
             </th>
                      <th>
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                    {locations.map((location, index) =>

                      <tr key={index}>
                        <td>
                          {location.name}
                        </td>
                        <td>
                          {location.address}
                        </td>
                        <td>
                          <button className="btn btn-info btn-sm"
                            onClick={(location) => {

                              setFieldValue('name', location.name)

                            }}
                          >
                            Edit
           </button>
                        </td>
                      </tr>
                    )
                    }
                  </tbody>
                </table>
              </div>
            </>
          )}
        />
      </div>
    );

Я в основном пытаюсь редактировать некоторые данные, но когда я нажимаю кнопку редактирования, я получаю ошибку сообщение A component is changing a controlled input of type text to be uncontrolled., что я делаю не так?

1 Ответ

1 голос
/ 04 апреля 2020

ошибка была в кнопке 

<button className="btn btn-info btn-sm"
 onClick={(location) => {
 setFieldValue('location', location)
}}
>
Edit
</button>

кажется, что я ошибочно переопределил событие кнопки, хотя не должен был, все, что мне нужно было сделать, это удалить его как 

onClick={() => {
     setFieldValue('location', location)
    }}
...