How do we implement the simple logging function of a single table in react?

First we need to flow out the free space in our Modal to display the place where the log will be displayed after we update the data.

Here we use a modal pop-up box in antd and a component of tabs.
Here we refer to the antd official file tabs tab https://ant.design/components/tabs-cn
and then use it if the data here is updated. It is the date, input, and select components of antd. Then we need to define listening events in our borders to monitor data changes.
Then we need to use the method to obtain the data after losing focus.
In the date component, we use the onchang method, in the input we use the onblrs method, and in the select component we use the onselect method to obtain data after losing focus.
Next we will write a logic for this method

const Blurs = (e) => {
    
    
        let rizhia = {
    
     rizhil: `修改了任务名称${
      
      e.target.value}` }
        insertrz(rizhia)
    }
    const Selectk = (label) => {
    
    
        let rizhia = {
    
     rizhil: `修改了任务名称${
      
      label}` }
        insertrz(rizhia)
    }
    const onChange: DatePickerProps['onChange'] = (e, date, dateString) => {
    
    
        console.log(date, dateString);
        settime(date)
        let rizhia = {
    
     rizhil: `修改了任务名称日期` }
        insertrz(rizhia)
    };

Here, after we obtain the input data, we pass the value to the insertz method, and then we write an insertz logic.

const insertrz = (obj) => {
    
    
        let message = [...rizhi];
        message.push(obj);
        setrizhi(message)
    }

Oh, by the way, I forgot to mention earlier that you need to define a useState in the react function component to obtain log information.

const [rizhi, setrizhi] = useState([])

Then combined with the logic in insertz, we have obtained the changed information, and then we just render the data.

 {
    
    props.rizhi.map((item, index) => {
    
    
                return (
                    <p key={
    
    index}>{
    
    item.rizhil}</p>
                )
            })}

Here I have encapsulated the modal component, so the received rizhi is received through props. Something needs to be paid attention to here.
Then we need to pass the data from the parent component to the modal component. Here we refer to my previous blog on the
five methods of passing values ​​https://blog.csdn.net/qq_53509791/article/details/129021765?spm =1001.2014.3001.5501