react+antd开发中input框每输入一个字符就失去焦点

1.问题出现

我需要做一个功能，就是在一个点击显示的气泡框上，有一个输入框，输入数量后点击确定完成添加，效果图大概是这样的

由于整体开发用了react+antd，所以我用了antd的一个Popconfirm气泡确认框，并且把红框圈住的地方抽离出来，代码大致如下：

// 增加商品数量的Popconfirm的title
		const AddPrizeNumMenu = ({ records }) => (
			<div>
				<div>{`可用库存: ${records.prizeNum}`}</div>
				<FormItem>
					{`增加商品数量：`}
					{getFieldDecorator('addPrizeNum', {
						rules: [ { required: true, message: '请输入新增商品数量' }, { pattern: /^\d*$/, message: '请输入正确的商品数量' } ]
					})(<Input/>)}
				</FormItem>
			</div>
		);

<Popconfirm
	icon={<Icon type="none" />}
	title={<AddPrizeNumMenu records={record} />}
	onConfirm={this.addPrizeNum}
	okText="保存"
	cancelText="取消"
>
	<a>增加商品数量</a>
</Popconfirm>

我将Popconfirm的title写成了一个组件去引入。
但是这样就出现了我今天写这篇文章的问题：就是我每次在输入框上输入时，每当我输入一个字符，输入框就失去了焦点，不能连贯的输入

2.解决过程

百度了一下，发现之所以会失去焦点，大概是因为代码中哪里触发了render，使组件进行重新渲染，所以输入框自然就失去了焦点。例如像这样：

<Input onChange={()=>{
	this.setState({})
}}/>

或者是render的return中用到了if/else这样的分支判断
又或者是哪里的key属性用了随机数等不确定数值
等等都会触发render重新渲染

我检查了一下我的代码，发现好像并没有哪里触发了重新渲染，一时间还真不知道怎么解决。
后来看到了这样的一个答复：

我想到了是不是我把Popconfirm的title写成了一个组件去引入的原因导致的，因为我也是把输入框写在了组件里面。于是我改写了代码，不再将title抽离出来

<Popconfirm
	icon={<Icon type="none" />}
	title={
		<div>
			<div
				style={{ display: record.lotteryType === '1' ? 'block' : 'none' }}
			>{`可用库存: ${record.productsRest || record.totalNum}`}</div>
			<FormItem>
				{`增加商品数量：`}
				{getFieldDecorator('addPrizeNum', {
					rules: [ { pattern: /^\d*$/, message: '请输入正确的商品数量' } ]
				})(<Input style={{ display: 'inline-block', width: '60px' }} />)}
			</FormItem>
		</div>
	}
	onConfirm={this.addPrizeNum}
	okText="保存"
	cancelText="取消"
>
	<a>增加商品数量</a>
</Popconfirm>

然后奇迹出现了，居然有效，谢天谢地

不过就像上面的答复一样，具体原因我也不知道为什么这样就可以了
希望有大佬能在评论告知一声!!!