Ant Design을 사용하고 있으며 Forms에 다음과 같은 문제가 있습니다.
자동 완성 제안을 원격으로 가져 오는 데 필요한 코드로 antd AutoComplete를 래핑하는 사용자 지정 구성 요소가 있습니다.
const ProductComplete = () => {
const [value, setValue] = React.useState('')
const [options, setOptions] = React.useState([])
const onSearch = searchText => {
fetchProductsFromServer(searchText)
.then(options => options.map(o => ({value: o})))
.then(options => setOptions(options))
}
const onChange = data => {
setValue(data)
}
return (
<AutoComplete
value={value}
options={options}
onSearch={onSearch}
onChange={onChange}
/>
)
}
하지만 내가 antd Form에서 사용할 때 :
return (
<Form
{...formLayout}
ref={this.formRef}
>
<Form.Item
name={'product'}
label={'Product'}
rules={[{
required: true
}]}
>
<ProductComplete/>
</Form.Item>
</Form>
따라서 외부에서 유효성 검사를 트리거 let fieldsValue = await this.formRef.current.validateFields()하면 양식이 필드에 아무것도없는 것처럼 동작하고 사용자에게 지정된 유효성 검사 규칙에 따라 필드가 필요하다는 신호를 보냅니다 (자동 완성에 텍스트가있는 경우에도).
그러나 AutoComplete를 자체 구성 요소로 패키징하는 대신 Form을 보유하는 구성 요소에 직접 연결하면 (위와 같이) 잘 작동합니다!
return (
<Form
{...formLayout}
ref={this.formRef}
>
<Form.Item
name={'product'}
label={'Product'}
rules={[{
required: true
}]}
>
<AutoComplete
value={this.state.product}
options={this.state.products}
onSearch={(searchText) => this.onSearchProducts(searchText)}
onChange={(value) => this.onChange(value)}
/>
</Form.Item>
</Form>
이유가 무엇일까요?
건배!
내가 알아 낸 건 신경 쓰지 마!
나는 어떻게 든 Ant Design 웹 사이트 의 https://ant.design/components/form/#components-form-demo-customized-form-controls 섹션을 눈치 채지 못했습니다 .
사용자 지정 구성 요소에 제어 된 value속성과 onChange이벤트 를 전달하기 만하면됩니다 .
const ProductComplete = ({value = '', onChange}) => {
const [products, setProducts] = React.useState([])
const onSearch = searchText => {
fakeFetch(searchText)
.then(options => options.map(o => ({value: o})))
.then(options => setProducts(options))
}
const handleChange = (value) => {
if (onChange) {
onChange(value)
}
}
return (
<AutoComplete
value={value}
options={products}
onSearch={onSearch}
onChange={handleChange}
/>
)
}
이제 잘 작동합니다. 정말 꽤 분명합니다.
건배
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다