[英]How to set input value of one field based on another field in formik?
[英]How to set formik field value
我正在尝试将保存的值加载到 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.
,做错了什么?
错误在按钮中
<button className="btn btn-info btn-sm"
onClick={(location) => {
setFieldValue('location', location)
}}
>
Edit
</button>
似乎我错误地覆盖了按钮事件,而我不应该这样做,我所要做的就是将其删除为
onClick={() => {
setFieldValue('location', location)
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.