[Field]自定义组件在unmount后，还是校验了 #3962

 

Comments

   

cwtuan commented 15 days ago

Component Field Reproduction link https://riddle.alibaba-inc.com/riddles/27d1ebab import ReactDOM from 'react-dom'; import React from 'react'; import { Input, Button, CheckBox, Field,Form,Select } from '@alifd/next'; const CheckBoxGroup = CheckBox.Group; const dataSource=[1,2,3]; const MySelect = (props) => { return <Select {...props}/> } class App extends React.Component { field = new Field(this, {scrollToFirstError: -10}); notEmpty(rule, value) { if (!value || value.length==0) { return Promise.reject("必选"); } else { return Promise.resolve(null); } } render() { const init = this.field.init; return (<div className="demo"> <Form field={this.field}> <Form.Item> <Input {...init('input', { })} /> </Form.Item> { this.field.getValue('input') && <> <Form.Item> <Select multiple dataSource={dataSource} {...init('next_select', { rules: [{validator: this.notEmpty}] })} /> </Form.Item> <Form.Item> <MySelect multiple dataSource={dataSource} {...init('my_select', { rules: [{validator: this.notEmpty}] })} /> </Form.Item> </> } </Form> <br/> <Button type="primary" onClick={() => { this.field.validatePromise().then(({errors, values}) => { console.warn('aaa errors',errors); console.log('aaa values',values) }); }}>validate</Button> </div>); } } ReactDOM.render(<App/>, mountNode); Steps to reproduce Input输入1，点Validate按钮，next_select、my_select为空，校验不通过 => 符合预期 Input清除，点Validate按钮，next_select、my_select都被Unmount了，不应该校验。 next_select => 没有校验，符合预期 my_select => 校验了，不符合预期 next_select是fusion原生组件，my_select只是包装成自定义组件（但里面也是Fusion原生组件） const MySelect = (props) => { return <Select {...props}/> }

 

 

  Member

bindoon commented 15 days ago • 

edited 

你的组件不支持 ref，需要用 React.forwordRef 包裹下 const MySelect = React.forwordRef((props, ref) => { return <Select {...props} ref={ref}/> })

 

  Author

cwtuan commented 15 days ago

那最好在文档描述一下这个问题和解法。 但我觉得这样对使用上很不方便，你们再看看，能否改变实现，不要靠ref

 

 

 bindoon added the 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。