要在 react-bootstrap-typeahead 中擦除的输入值

Question

使用 formik 和 react-bootstrap-typeahead，我在 formik 中有 2 个 typeahead

我想要做的是，我有 2 个预输入，取决于从 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 时输入的输入值

场景步骤：

1. 从 typeahead-1 中选择选项，将选项加载到 typeahead-2
2. 在搜索栏中输入一些值并从 typeahead-2 中选择一个选项
3. 转到 typeahead-1 并选择任何其他选项并将选项加载到 typeahead-2，...但是这里搜索 typeahead-2 的输入值仍然存在，如在步骤 2 中输入的那样

我想知道当在 typeahed-1 中选择不同选项时，如何删除搜索 typeahead-2 的输入值

Answer 1

我通过使用 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()
      ...
    }      
  }
/>

希望这对其他人有所帮助