如何解决要在 react-bootstrap-typeahead 中擦除的输入值
使用 formik 和 react-bootstrap-typeahead,我在 formik 中有 2 个 typeaheads
我想要做的是,我有 2 个 typeaheads,取决于从 typeahead-1 中选择的选项,我得到了 typeahead-2 的选项,它的效果非常好
<Formik
initialValues={{list:'',listOne:''}}
onSubmit={this.modalSubmit}
validationSchema={Yup.object().shape({
list: Yup.string().required("Select ID"),listOne: Yup.string().required("Select ID"),})}
>
{props=>{
const {
values,touched,errors,dirty,isSubmitting,handleBlur,handleSubmit,handleReset,setFieldValue,setFieldTouched,} = props
return(
<Form className="bootstrap" onSubmit={handleSubmit}>
<Form.Row className='row-form'>
<Form.Group as={Col} md={6} sm={6} lg={6} xl={6}>
<Form.Label>Client ID</Form.Label>
<div className='custom-dropdown'>
<i className="fal fa-angle-down fa-angle-assign"/>
<Typeahead
id='list'
name='list'
valueKey="id"
placeholder="Select ID"
options={listOptions}
onBlur={(e) => {setFieldTouched("list",true)}}
isValid={touched.list && !errors.list}
isInvalid={!!errors.list}
onChange={async selected=>{
if(selected[0]){
setFieldValue('list',selected)
await Options.loadListOneOptions(selected[0].id)
const getListOneOptions = Options.getListOneOptions
this.setState({
listOneOptions: getListOneOptions,})
}
}}
/>
</div>
{errors.list && touched.list && (<div className="input-Feedback">{errors.list}</div>)}
</Form.Group>
<Form.Group as={Col} md={6} sm={6} lg={6} xl={6}>
<Form.Label>Select ID</Form.Label>
<div className='custom-dropdown'>
<i className="fal fa-angle-down fa-angle-assign"/>
<Typeahead
id='listOne'
name='listOne'
valueKey="id"
placeholder="Select ID"
options={this.state.listOneOptions}
onBlur={(e) => {setFieldTouched("listOne",true)}}
isValid={touched.listOne && !errors.listOne}
isInvalid={!!errors.listOne}
onChange={...}
/>
</div>
{errors.listOne && touched.listOne && (<div className="input-Feedback">{errors.listOne}</div>)}
</Form.Group>
</Form.Row>
<Form.Group style={{textAlign:'center'}} className='row-form'>
<Link to='...'>
<Button type='submit' id='cancelButtonStyle' style={{marginRight:'10px'}}>Cancel</Button>
</Link>
<Button type='submit' className="btn-default" style={{textTransform:'none',borderRadius:'0%'}}>Submit</Button>
</Form.Group>
</Form>
)
}}
</Formik>
问题:-
在typeahead-1中选择不同的选项时,如何删除在搜索typeahead-2时输入的输入值
场景步骤:
- 从 typeahead-1 中选择选项,将选项加载到 typeahead-2
- 在搜索栏中输入一些值并从 typeahead-2 中选择一个选项
- 转到 typeahead-1 并选择任何其他选项并将选项加载到 typeahead-2,...但这里搜索 typeahead-2 的输入值仍然存在,如在步骤 2 中输入的那样
我想知道在 typeahed-1 中选择不同的选项时,如何删除搜索 typeahead-2 的输入值
解决方法
我通过使用 ref 解决了它
// create a ref
this.typeaheadRef = React.createRef()
// add ref to typeahead-2
<Typeahead
ref={this.typeaheadRef}
...
/>
// use the ref in onChange of typeahaed-1,current.clear() will clear the input
<Typeahead
...
onChange={ selected=>{
...
this.typeaheadRef.current.clear()
...
}
}
/>
希望这会帮助其他人
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。