- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个表单,其中有一个字段需要通过 API 调用显示建议。应该允许用户选择或不选择其中一个选项,并且他们输入的值将用于与表单一起提交,但此字段是必需的。我正在使用 Formik 处理表单,Yup 用于表单验证以检查是否需要此字段,降档用于自动完成,以及用于该字段的 Material-UI。
当用户决定不使用建议的选项之一和 onBlur 触发器时,就会出现问题。 onBlur 总是重置该字段,我相信这是导致这种行为的降档,但这个问题的解决方案建议控制降档的状态,当我尝试它不能很好地与 Formik 和 Yup 一起工作时,我可以解决一些问题'真正理解,因为这些组件控制着该字段的 inputValue。
这是我目前所拥有的:
const AddBuildingForm = props => {
const [suggestions, setSuggestions] = useState([]);
const { values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
modalLoading,
setFieldValue,
setFieldTouched,
classes } = props;
const loadOptions = (inputValue) => {
if(inputValue && inputValue.length >= 3 && inputValue.trim() !== "")
{
console.log('send api request', inputValue)
LocationsAPI.autoComplete(inputValue).then(response => {
let options = response.data.map(erlTO => {
return {
label: erlTO.address.normalizedAddress,
value: erlTO.address.normalizedAddress
}
});
setSuggestions(options);
});
}
setFieldValue('address', inputValue); // update formik address value
}
const handleSelectChange = (selectedItem) => {
setFieldValue('address', selectedItem.value); // update formik address value
}
const handleOnBlur = (e) => {
e.preventDefault();
setFieldValue('address', e.target.value);
setFieldTouched('address', true, true);
}
const handleStateChange = changes => {
if (changes.hasOwnProperty('selectedItem')) {
setFieldValue('address', changes.selectedItem)
} else if (changes.hasOwnProperty('inputValue')) {
setFieldValue('address', changes.inputValue);
}
}
return (
<form onSubmit={handleSubmit} autoComplete="off">
{modalLoading && <LinearProgress/>}
<TextField
id="name"
label="*Name"
margin="normal"
name="name"
type="name"
onChange={handleChange}
value={values.name}
onBlur={handleBlur}
disabled={modalLoading}
fullWidth={true}
error={touched.name && Boolean(errors.name)}
helperText={touched.name ? errors.name : ""}/>
<br/>
<Downshift id="address-autocomplete"
onInputValueChange={loadOptions}
onChange={handleSelectChange}
itemToString={item => item ? item.value : '' }
onStateChange={handleStateChange}
>
{({
getInputProps,
getItemProps,
getMenuProps,
highlightedIndex,
inputValue,
isOpen,
}) => (
<div>
<TextField
id="address"
label="*Address"
name="address"
type="address"
className={classes.autoCompleteOptions}
{...getInputProps( {onBlur: handleOnBlur})}
disabled={modalLoading}
error={touched.address && Boolean(errors.address)}
helperText={touched.address ? errors.address : ""}/>
<div {...getMenuProps()}>
{isOpen ? (
<Paper className={classes.paper} square>
{suggestions.map((suggestion, index) =>
<MenuItem {...getItemProps({item:suggestion, index, key:suggestion.label})} component="div" >
{suggestion.value}
</MenuItem>
)}
</Paper>
) : null}
</div>
</div>
)}
</Downshift>
<Grid container direction="column" justify="center" alignItems="center">
<Button id="saveBtn"
type="submit"
disabled={modalLoading}
className = {classes.btn}
color="primary"
variant="contained">Save</Button>
</Grid>
</form>
);
}
const AddBuildingModal = props => {
const { modalLoading, classes, autoComplete, autoCompleteOptions } = props;
return(
<Formik
initialValues={{
name: '',
address: '',
}}
validationSchema={validationSchema}
onSubmit = {
(values) => {
values.parentId = props.companyId;
props.submitAddBuildingForm(values);
}
}
render={formikProps => <AddBuildingForm
autoCompleteOptions={autoCompleteOptions}
autoComplete={autoComplete}
classes={classes}
modalLoading={modalLoading}
{...formikProps} />}
/>
);
}
最佳答案
开始工作了。需要使用 handleOuterClick 并使用 Formik 值设置 Downshift 状态:
const handleOuterClick = (state) => {
// Set downshift state to the updated formik value from handleOnBlur
state.setState({
inputValue: values.address
})
}
现在,每当我点击退出时,该值都会保留在输入字段中。
关于reactjs - 使用 Formik 降档自动完成 onBlur 重置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55027063/
$('#lPass').focus(function() { if (this.value == this.defaultValue) this.value = '';
我有一个容器 div,里面包含许多输入和复选框,我想仅在容器 div 失去焦点时触发 onBlur 事件,而不是每次其中的任何元素失去焦点时触发 onBlur 事件 最佳答案 react docume
我的表单检查不起作用。如果我将别名字段留空,它将返回已填充的名称字段。 var alias = document.getElementById("alias"); var name = documen
我有一个包含 5 个字段和一个提交按钮的表单。在其中一个字段上,我有一个 onblur 事件,但如果用户更改该文本框中的值并直接单击提交按钮,那么在这种情况下 onblur 不会被触发或不起作用。在这
我正在尝试创建一个函数,允许编辑 div,并且当不再聚焦时(例如单击元素外部),它应该执行一个函数。 当用 fiddle 测试这个时,预期的响应不会发生。相反,当单击该元素时,它既使内容可编辑,又同时
我有一个带有 React-InstantSearch: 的导航栏为我提供了自动完成功能,有一个 onChange触发显示建议框的事件。还有一个onBlur当您离开搜索框并隐藏该框时触发的事件。这个o
我有两个输入,它们是 的一部分。我试图在其中之一发生更改(dpFin)后获取输入的值。问题是,当我使用 var endDt = document.getElementById("dpFin").va
我有一个默认情况下禁用的文本框... onclick 可以工作并使其能够输入,但是当我单击单选按钮时...它不会再次禁用该文本框 有什么线索吗? 提前致谢 李 最佳答案 没有“启用”属性。您必须将
我正在使用 JavaScript 对 HTML 表单进行验证。为什么刷新页面时Validator.validateInput会执行? 我希望它在模糊元素“first”时执行。 var Validato
当使用 jQuery 将文本输入到文本框时,我尝试编辑选择输入的内容。这是我的文本框 这是我的多重选择框 Yazılımevi 这是我的 javascript 函数(我知道这很简单) func
我有一个使用 jquery form validator 的表单:我的问题是如何让验证不仅在提交时触发,而且在模糊时触发?我希望它验证模糊时的每个单独字段(而不是模糊时的整个表单,因为我不希望为尚未向
我有以下代码,也称为内联代码,如下所示。问题是警报永远不会触发。在 Firebug 中,我可以看到数据充满了我的对象,但仍然没有触发警报。有什么想法吗? function update(s_arriv
如何在 javascript onblur 中为文本框中输入的所有值添加前缀 - 符号 最佳答案 首先,您需要添加事件处理程序。一旦你这样做了,这就是你的功能: function textBoxBlu
我正在使用 onblur 事件来获取日期选择器中的日期值。这是我的控件: 这是我的功能: function UpdatePrice(_this) { console.log(_this.va
我有一个表格,其中包含许多用户可以为其赋值的文本输入字段。我的目标是,如果用户“onBlur”的any 字段,则将激活一个功能。我可以通过单独标记每个单元格来解决这个问题,但它会非常重复,我相信有更有
我正在使用 onblur 进行文本框数据检查。 OnBlur 工作正常,直到或除非我们不按 ALT + TAB 或 Windows 按钮。 如果我按下 ALT + TAB 然后模糊函数执行多次.. 例
HTML It is a div which has a dark future Not Remove 和脚本 $(function(){ $("input").blur(function(
我在 jquery 的 blur 和 onblur 事件上遇到了陌生人问题。当您对输入进行模糊处理时,首先执行 onblur 事件和 .blur 方法。但是,当您通过点击 anchor 标记来调用触发
我正在使用 jQuery 将一个输入字段的值复制到另一个模糊的输入字段。这是我的代码: $( "input[id$=token-input-search_field]" ).blur( functio
我有一个应用程序,我需要更新数字,为此,我计划如下,当我单击数字容器时,我将其转换为 jquery 的输入字段,然后在模糊时我想将其关闭为容器div内的纯文本,然后触发ajax在数据库中更新它,但第一
我是一名优秀的程序员,十分优秀!