杂记：一些非受控组件的问题

本篇中组件都以antd为例

什么是非受控组件？

<Input />

在输入框中输入文字，可以实时反映出来
此时组件的行为是组件自身内部控制的，假如我们要写个按钮去控制输入框的文字（比如清空），是不容易的。
如 React 官方文档所述

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

那么如何改造非受控组件，以达到清空状态的目的呢？

1 改造为受控组件

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

2 卸载再挂载

{
this.state.flag?
<Dragger
  {...props}
>
  <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
</Dragger> : 
null
}

<Button
  onClick={()=>{
    this.setState({flag:false})
    setTimeout(()=>{
      this.setState({flag: true})
    },100)
  }}
>
  reset
</Button>

在 antdpro/umi/dva 项目中，可以将这样的逻辑封装到effect里，由于effect是generator写法，所以不能简单的将上面的代码封装，generator函数中不可以套普通函数。使用Promise：

*blinkFlag(_, { put, call }) {
  yield put({
    type: 'overrideStateProps',
      payload: {
        flag: false,
      },
    });
    yield call(delay, 100);
    yield put({
      type: 'overrideStateProps',
      payload: {
        flag: true,
      },
    });
  },

注意： 对于设置有类似defaultValue 的组件，在执行blinkFlag前要置空defaultValue。