- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在安装 Formik 之前,我的输入如下所示:
const [search, setSearch] = useState('');
....
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
name="search"
type="search"
value={search}
onChangeText={(e) => setSearch(e)}
autoCorrect={false}
defaultValue={search}
/>
<Button
disabled={!search}
title="Create"
onPress={(e) => {
createNewCar(e);
}}
/>
</View>
在 onChangeText
中,我会将输入的每个字符设置为名为 search
的状态属性。我输入的每一个键都会调用一个 API 来从数据库中获取一些数据。
例如:
如果我在输入中输入 h
,数据库将返回 2 辆汽车 honda, hyundai
我读到 Formik 可以简化 React 中的很多表单设置,所以我下载了它,但是,Formik 的 handleChange
属性想要跟踪 values.search
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
handleChange(values.search);
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
现在我无法在表单中输入内容,因为 value
指向 values.search
而不是像原来那样指向 search
。
问题
如何在 onChangeText
中触发 setSearch
,同时将 search
添加到 formik values
属性中?
最佳答案
您可以使用setFieldValue('search', e.target.value)
代替handleChange(),将代码更改为以下内容:
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
//handleChange(values.search);
setFieldValue('search', e.target.value)
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
关于react-native - Formik handleChange - 使用钩子(Hook),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62092886/
这个问题在这里已经有了答案: Why is JavaScript bind() necessary? (4 个回答) 3年前关闭。 我不明白我为什么需要 this.handleChange = thi
我有3个这样的选择 const { selectedOption , selectedOption2, selectedOption3} = this.state; const val
我有一个选择语言的选择,当我从选择的语言中获取值/代码时,我将其保存到本地存储中,然后我从我使用的本地存储中获取值/语言代码,并将其作为命中 1 的参数API例如API'pages',根据本地存储中抛
当前平台:NodeJS(最小)、客户端 React w/Redux、Formik,是的。 给出以下示例代码(不包括整个 React 组件代码,因为它与问题无关): class RegisterPage
我有一个组件来自react-select将几个选项呈现到下拉列表中,这些选项是从 api 调用中获取、映射并显示名称的。当我从下拉列表中选择一个选项时,所选名称不会出现在框中。看来我的handleCh
我有以下字段,我希望通过根据数据添加前导零和尾随零来使所需的输出采用 XX.xxxxxx 的格式 我该怎么做才能修复我的 handleChange 方法以正确格式化用户的输入: handleChan
我的 React 代码中有一个 handleChange 函数,我只是想知道语法。 handleChange: function(event){ var newState = {};
我有 6 个使用 React-Datepicker 的表单输入。我需要使用handleChange()来setState 6次,但我不明白如何从每个表单输入动态获取名称属性,因为“日期”在通过函数传递
我使用elasticsearch在我的 View 中进行搜索(ReactJs)。我创建了一个函数handleChange来根据我正在搜索的内容更改表中数据的状态。所以到目前为止我在我的代码中做到了这一
我正在使用 React 制作一个 list 。这是我的 Parent 组件: {this.props.data.map(item => { return( this.han
如何在handleChange和componentDidMount的回调函数中添加this? // callback from github api /api.github.com/repos/{us
我想知道这是否是一种好的做法,或者我是否应该以不同的方式设计这个应用程序。我特别关心这两个“handleChange”函数,想知道是否可以通过某种方式对其进行简化。当然,我们也欢迎其他建议。 用户添加
在输入元素中,handleChange 函数将从 onChange 事件接收事件对象。如何为非输入字段创建自定义 handleChange 函数,如下所示? import React from 're
我明白了 Field有一个 onChange您可以在其中传递自己的 Formik 的属性 onChange来自这里的 Prop :https://jaredpalmer.com/formik/docs
在安装 Formik 之前,我的输入如下所示: const [search, setSearch] = useState(''); ....
我在 formik 上遇到问题,当我在 onValueChange 中添加其他函数时,formik 的 handleChange 无法正常工作。是否有针对此类场景的解决方案。当我提交没有值(value
Formik包提供了handleBlur、handleChange等事件处理器,对于普通的表单项,我们可以这样赋值: 如果我更仔细地观察 onChange 事件应该是这样的: {
在安装 Formik 之前,我的输入如下所示: const [search, setSearch] = useState(''); ....
我在 formik 上遇到问题,当我在 onValueChange 中添加其他函数时,formik 的 handleChange 无法正常工作。是否有针对此类场景的解决方案。当我提交没有值(value
Formik包提供了handleBlur、handleChange等事件处理器,对于普通的表单项,我们可以这样赋值: 如果我更仔细地观察 onChange 事件应该是这样的: {
我是一名优秀的程序员,十分优秀!