React 如何清空 Input 和时间输入框，单独使用不含 FormItem

背景

React 的搜索输入框是动态生成的，没有放在 Form 对象中，同时提供一个重置按钮，以便手动清空输入框的内容。

网上的资料都是直接通过 Form 对象的 resetFieldValue 实现的，通过跟踪 Input 对象的属性，找到了清空的方法，整理如下。

清空 Input 输入框

为动态生成的 Input 组件，设置一个动态 ref 属性，然后通过它来操作 Input 组件，设置它的 state 中的 value 值可以达到清空的目的。

第一步，设置属性 ref，下面的内容是放在 map 中动态映射出的内容：

<Input  ref={`input${temp.ffId}`} 
        onChange={(e)=>this.changeValue(e, temp.key, 'Input')} 
        key={temp.ffId} 
        placeholder={`请输入${temp.keyDesc}`} />
1
2
3
4

第二步，通过 ref 定位到 Input 对象：

this.refs[`input${key}`]
    .inputRef
    .current.setState({
		value: '',
	});
1
2
3
4
5

通过 this 对象的 refs 属性，嵌套了三层 refs[].inputRef.current 定位到了每个 Input 组件。

第三步，重置 Input 的 value 的状态值，定位到后调用 setState 即可。

清空 RangePicker 输入框

时间插件跟 Input 不一样，没法通过 ref 定位到输入值，但是根据网上介绍方法，有一种有效的方式是指定 key ，然后随机设置这个 key 的值为任意时间对象，就清空了。

第一步，定义 key 属性，指向一个全局对象：

<RangePicker
  key={this.state.timeQuery[`${temp.key}`]} 
  onChange={(e)=>this.changeValue(e, temp.key, 'time')} />
1
2
3

第二步，清空，其实就是设置为一个随机时间对象：

const cur = this.state.timeQuery;
cur['key'] = new Date();
this.setState( { timeQuery: cur});
1
2
3

绑定 onChange 事件，收集输入信息

动态生成的表单信息怎么收集呢？设置 onChange 事件，收集信息到全局属性中，同时要区分 Input 和 RangePicker ，因为它们取值的方式不同：

changeValue =(e, prop, type)=>{
   	const cur = this.state.inputValues;
   	if (type === 'time') {
		if (e == null || e.length !== 2) {
			cur[prop] = null;
		} else {
			const start = e[0].format('yyyy-MM-DD') ;
			const end = e[1].format('yyyy-MM-DD');
			cur[prop] = [start, end];
		}
	} else if (type === 'Input'){
   		cur[prop] = e.target.value;
	}

   	this.setState({
		inputValues: cur,
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

启示录

本文记录的背景是一个可配置的 React 查询功能，查询表单是可配置的，表格数据也是可配置的，动态生成列表组件，这个动态定制的思路非常好，可以抽成一个可复用的组件，要不每个页面的数据查询都要写一遍 React 的 jsx 。