gpt4 book ai didi

javascript - 如何在 Redux-form 中有可搜索的下拉菜单

转载 作者:行者123 更新时间:2023-11-29 10:03:50 25 4
gpt4 key购买 nike

我正在使用来自 redux-form 的字段数组,我需要在我的表单中有一个可搜索的下拉菜单。我知道正常的下拉菜单可以这样完成,

<Field name={`${object}.method`} component="select" validate={required} id={`${object}.key`}>
<option value="id">id</option>
<option value="css">css</option>
<option value="xpath">xpath</option>
<option value="binding">binding</option>
<option value="model">model</option>
</Field>

但这不是可搜索的下拉列表。即使我要使用它,它也只是提供了一个基本的 html 选择,我如何才能将 css 样式应用于它以使其与其他 Bootstrap 元素相匹配?

要有一个可搜索的下拉列表,我使用 react-select包裹。我试图做的是;

<Field
name={`${object}.method`}
type='text'
component={this.renderDropdown}
label="Method"
validate={required}
id={`${object}.key`}
valueField='value'
/>

renderDropdown = ({ input, id, valueField, meta: { touched, error }, ...props }) => {
return (
<React.Fragment>
<div className='align-inline object-field-length'>
<Select {...input} id={id} value={input.value.value} onChange={input.onChange}
options={[
{ value: 'id', label: 'id' },
{ value: 'css', label: 'css' },
{ value: 'xpath', label: 'xpath' },
{ value: 'binding', label: 'binding' },
{ value: 'model', label: 'model' },
]}
/>
</div>
</React.Fragment>
)
};

这不能正常工作,只有当下拉菜单处于事件状态时,该值才会存储在 redux-store 中(当它被点击时),在事件模糊时,它会丢失该值。 p>

我做错了什么?

是否有可能以 redux 形式提供可搜索的下拉列表?

最佳答案

回答我自己的问题,最后我发现我不能将 react-select 包与 redux-form 一起使用。

选择该值时,它将添加到React商店中,但会失去事件模糊的值。发生这种情况是因为 redux-form onBlur 事件触发了一个 Action ,该 Action 在其有效负载中传递了 null。为避免这种情况,github issue thread 中提到了几个解决方案。

通过定义一个自定义方法来处理 onBlur 为我做到了;

renderDropdown = ({ input, onBlur, id, meta: { touched, error }, ...props }) => {

const handleBlur = e => e.preventDefault();

return (
<React.Fragment>
<Select {...input}
id="object__dropdown--width"
options={allRepos}
onChange={input.onChange}
onBlur={handleBlur}
/>
</React.Fragment>
)
}



<Field name="listAllRepo"
value="this.state.accountno"
component={this.renderDropdown}
placeholder="Select"
/>

希望这对其他人有帮助!

关于javascript - 如何在 Redux-form 中有可搜索的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48419984/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com