传值问题

[yvanwangl]

传值问题

[yvanwangl]

@myronlau AddStorage 组件给 StorageForm 传入了一个属性 onSelect

onSelect(supplierId){
            dispatch({
                type: 'storage/setSupplier',
                payload: {
			supplierId
                }
            })
        }

这样， 当 StorageForm 中的 供应商选择 组件值变更时会调用 onSelect 把供应商的 id 传回 AddStorage 中。

DatePicker 类型的日期 为 moment 对象，见 antd RangePicker 在提交之前会转为日期字符串：

const onSubmit = (e) => {
		e.preventDefault();
		validateFields((errors, values) => {
			if (!!errors) {
				return false;
			}
			if (values['timeRange']) {
				values['timeRange'] = values['timeRange'].map((time) => time.toLocaleString());
			}
			onSearch(values);
		})
	};

这样是为了方便拼接查询字符串，后端接收到日期字符串后传入 new Date(dateString) 得到 Date 对象，作为条件进行数据查询。

有问题继续交流 : )

[myronlau]

@yvanwangl 谢谢你的回复，根据你的回答问题得到解决了。
现在有个新的问题想再请教你，在AddStorageGrid.jsx中，

  	onListCellChange(index, key){
		const {editProducts} = this.props;
		const {totalAmount, paymentAmount} = this.state;
		return ({key, label})=> {
			const dataSource = [...this.state.dataSource];
			const arr = label.match(/([\u4e00-\u9fa5\w]+)/g);
			dataSource[index]['productId'] = key;
			dataSource[index]['productName'] = arr[0];
			dataSource[index]['productUnit'] = arr[1];
			this.setState({dataSource});
			editProducts(dataSource, totalAmount, paymentAmount);
		}
	}

其中const arr = label.match(/([\u4e00-\u9fa5\w]+)/g); 怎么理解？应该怎么用呢？

[yvanwangl]

@myronlau 这块是这样的，在增加商品的表格中，商品是一个可编辑下拉框，然后在 ListEditableCell 组件中的 Select 中设置了 labelInValue 属性，这样在 Select 组件的 onSelect 事件处理函数的参数对象中就可以获取到选择项的 value 和 label， 详情参考 antd 文档；
由于我的表格中有一列 “单位”， 而单位属性来自于商品，所以在渲染商品的下拉列表时我是这么处理的(代码在 ListEditableCell 组件中)：

<Select
	defaultValue={{ key: value.key }}
	onSelect={this.handleSelect}
	onBlur={this.check}
	style={{ minWidth: 120, width:'100%' }}
	disabled={disabled || false}
	labelInValue
>
	{
		productList.map(({_id, productName, productUnit})=>
			<Option key={_id}>{`${productName} (${productUnit})`}</Option>
	         )
	}
</Select>

将商品名称和单位都放入到了 label 中，这样在

    check = () => {
        this.setState({
            editable: false
        });
        if (this.props.onChange) {
            this.props.onChange(this.state.value);
        }
    };

方法中，通过 onChange 函数，将 value 对象传递回 父组件 AddStorageGrid 中：

	onListCellChange(index, key){
		const {editProducts} = this.props;
		const {totalAmount, paymentAmount} = this.state;
		return ({key, label})=> {
			const dataSource = [...this.state.dataSource];
			const arr = label.match(/([\u4e00-\u9fa5\w]+)/g);
			dataSource[index]['productId'] = key;
			dataSource[index]['productName'] = arr[0];
			dataSource[index]['productUnit'] = arr[1];
			this.setState({dataSource});
			editProducts(dataSource, totalAmount, paymentAmount);
		}
	}

这个方法你应该很熟悉啦，箭头函数的参数 {key, label} 就是 value 对象，这时候我需要把 “单位” 提取出来，然后放到表格数据的 ‘productUnit’ 属性中，const arr = label.match(/([\u4e00-\u9fa5\w]+)/g); 这句就是一个正则匹配，如果 label 为 'aa(bb)'， 那么匹配出来的 arr = ['aa', 'bb']，对于字母数字 /([\w]+)/g 足以， 加入 \u4e00-\u9fa5 是为了匹配出汉字 : )

[myronlau]

@yvanwangl 谢谢你的解答，因为最近工作比较忙没来得及关issue，如果我还有问题继续沟通哈。

[myronlau]

@yvanwangl 还有一个问题哦，是StorageList取值的问题，如以下代码：

{
            title: '金额',
            dataIndex: 'totalAmount',
            key: 'totalAmount',
			render: (text, record, index)=> numberFormat(text)
        },

取totalAmount可以取到，
但是products是Array型的，如果取products里面的值怎么取呢？