react使用antd的Input组件，实时监听value变化

需求

1.  Input组件使用父组件props传过来的属性值作为初始值
2.  页面含有很多个Input框，都要支持修改，如何实现。

解决

1. 给每个input框加一个唯一标志属性 比如 name='xxx'
2. 增加onChange事件 事件里面获取元素name属性和value值
3. 注意：state里面的属性名和name值相同。

import React, { Component } from 'react'
import { Row, Col, Input, Tooltip, Tabs, Button, message, Divider } from 'antd';
import './index.scss'
export default class PersonInfo extends Component {
    //嫌疑人的相关人的多媒体信息的增删
    addAreaDataList_rel = []
    removeAreaDataList_rel = []
    state = {
        surveySuspectInfo: {},//嫌疑人详细信息 

    }
    //父组件props变化 就执行 ;
    static getDerivedStateFromProps(props, state) {
        const { surveySuspectInfo } = props
        //如果是提交 不要让父组件props更新传过来
        if (state.setStateOccurs) {
            state = {...state,setStateOccurs: false}
            return state
        } else {
            //案件名称 案件类型 交案单位 负责人 联系方式 立案时间
            state = { ...state, surveySuspectInfo,}
            return state;
        }
    }
    //监听Input框的变化 实现Input的value的动态赋值 。
    onSusInputChange = (e) => {
        let surveySuspectInfo = this.state.surveySuspectInfo
        surveySuspectInfo[e.currentTarget.name] = e.currentTarget.value
        this.setState({ surveySuspectInfo, setStateOccurs: true })
    }
    render() {
        const { surveySuspectInfo } = this.state
        return (
            
                
                    姓名
                    
                        
                    
                
                
                    性别
                    
                
                
                    年龄
                    
                
            
        )
    }
}