react之antd Design Input输入框value值清除及弹窗时自动获取焦点

正常我们使用输入框、选择器等都是结合表单来使用的，但是这次我就需要一个输入框来切换到编辑状态，那这样用表单当然肯定也是可以的，但是我觉得不完美，怎能杀鸡用牛刀，就单独的使用input组件，然后就遇到了两个问题：输入框内容清除、自动获取焦点。然后我就把输入框单独拎出来来进行重现这两个问题，并想办法解决。单独测试的代码=》codesandbox在线测试传送门

输入框内容清除

输入框显示默认值的话首先想到的就是defaultValue参数，但是antd里面的Input组件的defaultValue属性只会存储第一次传入的值，后续数据更新，defaultValue不会更新，value不一样，因为它是存储实时输入的值，业务上要求更新的。然后我百度了下，有一篇帖子说可以更新在使用defaultValue时教程传送门->。另一个办法就是使用value，然后在onchange中更新赋值。
都知道html5的input value属性显示了值就无法清除了，那么在react里我们可以使用onChange方法配合setState修改value的值，但是你用的时候会发现antd里最后一个字符怎么清除都清除不了
从控制台中可以看出值其实是空的，但是显示一直都会显示第一个字符，通过demo测试笔者发现在antd里有一个重新复制的语句，但是我看了源代码没找到。
那么想把它清空应该还可以通过dom操作。

 getEditInput = e => {
    e.persist();
    if (e.target.value) {
      this.setState({ inputValue: e.target.value });
    } else {
      // const times = setTimeout(() => {
        document.getElementById("clearInput").value = "";
      //   clearTimeout(times);
      // }, 10);
  };

但是这么写并不成功，这就很奇怪了，核武器般的操作都不能清空value，不应该。尝试性的加了个setTimeout，清空了。但是为空时焦点移除又显示回第一个字符了，还是有点问题，最后在配合form表单的检验功能不让它为空，勉强解决了，如果你这个输入框可以为空的话那可能有点不好办了，在下段位太低，溜了溜了。

自动获取焦点

在input的event时间里有一个focus方法，能让输入框获取焦点

openInput = () => {
  this.setState({
     displayInput: {
       display: "block",
       width: 200
     }
   });
   const input = this.refs.inputModelRef;
   // const times = setTimeout(() => {
     input.focus();
   //   clearTimeout(times);
   // }, 10);
 };
  // <Input ref={this.inputRef} />

同样，在在没加setTimeout前还是没效果的，其中的原理，笔者还没搞明白，说明还需要不断学习。