【后台管理系统】—— Ant Design Pro组件使用（二）

一、关联表单项 - 动态增删输入框Input

      

 

• 封装子组件

  class ParamsInputArray extends React.Component{
    constructor(props){
      super(props);
    }
  
    // 改变一组input输入框中的key值和value值
    handleChange = (paramType, index) => {
       const { onChange, value={} } = this.props;
  
       if(event && event.target && event.target.value){
          let newValue = {...value};
          if(paramType == 'key'){
            newValue.key = event.target.value
          }else{
            newValue.value = event.target.value
          }
  
          // 调用父级props传来的onChange事件
          // 将newValue对象存入数组对应index的位置
          onChange(newValue, index)  
        }
    }
  
    render() {
      const { value={}, keys, index, add, remove} = this.props;
  
      return (
        <Row gutter={8}>
            <Col span={5}>
                <Input placeholder="颜色/尺码" defaultValue={value.key} onChange={() => this.handleChange('key', index)}/>
            </Col>
            <Col span={8}>
                <Input placeholder="请输入参数" defaultValue={value.value} onChange={() => this.handleChange('value', index)}/>
            </Col>
            <Col span={2}>
              {keys.length > 1 ? (
                <Icon
                  type="minus-circle-o"
                  onClick={() => remove(index)}
                />
              ) : null}
            </Col>
            <Col span={6}>
              {index === 0 ? (
                <Button type="primary" onClick={() => add()}>新增</Button>
                ) : null}
            </Col>
        </Row>
      )
    }
  }

• 使用的几个方法

  // 初始化keys
  const initKeys = (detail) => {
      let defaultKeys =