react动态改变ref,input输入为空边框变为红色提醒

上代码

import React, { useEffect, useRef, useState } from 'react';

import { Space, Table, Tag, Input } from 'antd';

import type { ColumnsType } from 'antd/es/table';

const App: React.FC = () => {

  // style={(this.state.isFocused) ? {borderColor: 'black', borderColor: 'black',} : {fontStyle: 'italic', color: 'white'}}

  const [isFocused, setIsFocused] = useState(false);

  const [currentIdex, setCurrentIdex] = useState(0);



  const refList: any = useRef([]);

  const handleBlur = (e: any, index: any, record: any) => {

    let value = e.target.value.trim();

    data[index].tags = e.target.value;

    if (value == "" || value == undefined || value == null) {

      setIsFocused(true)

      setCurrentIdex(index);

      refList.current[index].focus();

    }

    // refList.current[index].style.borderColor="red"

  }

  interface DataType {

    key: string;

    name: string;

    age: number;

    address: string;

    tags: string;

  }

  const columns: ColumnsType<DataType> = [

    {

      title: () => {

        return <Tag color="red">red</Tag>

      },

      dataIndex: 'name',

      key: 'name',

      render: (text) => <a>{text}</a>,

    },

    {

      title: 'Age',

      dataIndex: 'age',

      key: 'age',

    },

    {

      title: 'Address',

      dataIndex: 'address',

      key: 'address',

    },

    {

      title: 'Tags',

      key: 'tags',

      dataIndex: 'tags',

      render: (text, record, index) => (

        <>

          <Input placeholder="Basic usage"

            ref={node => { refList.current[index] = node }}

            style={currentIdex==index&&isFocused ? { borderColor: 'red' } : { borderColor: '#ccc' }}

            defaultValue={text}

            onBlur={e => {

              handleBlur(e, index, record)

            }}

          />

        </>

      ),

    },

    {

      title: 'Action',

      key: 'action',

      render: (_, record) => (

        <Space size="middle">

          <a>Invite {record.name}</a>

          <a>Delete</a>

        </Space>

      ),

    },

  ];

  const data: DataType[] = [

    {

      key: '1',

      name: 'John Brown',

      age: 32,

      address: 'New York No. 1 Lake Park',

      tags: "nice"

    },

    {

      key: '2',

      name: 'Jim Green',

      age: 42,

      address: 'London No. 1 Lake Park',

      tags: "nice"

    },

    {

      key: '3',

      name: 'Joe Black',

      age: 32,

      address: 'Sydney No. 1 Lake Park',

      tags: "nice"

    },

  ];

  return (

    <Table columns={columns} dataSource={data} />

  )

}

export default App;