how to do validation for a antd Text (typography) component?-CodePudding

It seems that we couldn't add validation for antd editable <Text> (typography). The component doesn't accept value props like <Input> component. How do we do validation in that case?

Code:

const [title, setTitle] = useState("Battle");
<>
  <Form id="myForm" name="basic" onFinish={onSubmit}>
    <Form.Item
      name="title"
      rules={[
        {
          required: true,
          message: "Please input your title!"
        }
      ]}
    >
      <Text editable>{title}</Text>
    </Form.Item>
  </Form>

  <Button form="myForm" key="formSubmit" htmlType="submit" type="primary">
    Create
  </Button>
</>

Above code validation works but if the data is still there, it show validation error.

Codesandbox link : https://codesandbox.io/s/basic-antd-4-16-9-forked-o8nxdl?file=/index.js

CodePudding user response：

Here is a code that does some simple validations

function reducer (action , state) {
  switch (action.type){
    case 'title': 
       return {...state , data : { ...state.data , title : action.payload } 
              , errors : {  ...state.errors 
          , title : title.length > 3 null : '