React.ts中，input输入框输入完毕后重置为空，使用ref方式和断言

react.ts中，将使用ref对象绑定的input输入框进行清空内容，以及对应的ref的断言写法以保证获取到value值
好好好，今天来写一篇ts，前端真的是，我哭si，啥都要会！
分享一个对于ts的有趣写法，平时写项目的时候，ts自带的检查会保证我们的代码不会出现type类型的错误，但是这又间接提高我们的代码难度，虽然会报错提示吧，但工程量确实变大了。这不，今天在写input的时候，需要实现一个业务，从输入框输入的值显示到页面上排列，所以我使用ref绑定到input，然后设置按钮完成任务，为了提升用户体验，还是需要提交点击按钮后，将input内容清空好一点。其中遇到很多奇奇怪怪的错误，比如为什么需要使用到断言，因为写的时候，项目又没有输入input，导致ts检查到value值可能是null，就编译不了了，就像下面这样子就不行：

myref=React.createRef<HTMLInputElement>() //与js不一样，ref在这里需要使用泛型指明将来绑定到input的元素上面，也就是提前声明
<input ref={
    
    this.myref}></input>
        <button onClick={
    
    ()=>{
    
    
          this.setState({
    
    
            list:[...this.state.list,this.myref.current.value]  
          })
        }}>输出</button>
        <ul>
          {
    
    
            this.state.list.map(item=><li key={
    
    item}>{
    
    item}</li>)
          }
        </ul>

显然上面的是js写法，但是this.myref.current在ts看来，将来可能会出现null的情况（虽然我们知道不会，但是ts就是需要做检查防止真的出错），那么这个时候我们就需要告诉ts，我将来这个ref肯定是input的，而且不可能为空的，所以就是需要做个大胆的言论，下定义嘛！这就符合断言啦，所以需要写成这个样子来获取value值：

console.log((this.myref.current as HTMLInputElement).value); //告诉ts将来这个值就是input元素

那么最后的情况操作也是要使用断言了，但是有个坑！在setState后需要加上分号断开下一个断言，否则报表达式不可用的错误，最终代码就是这样子：

myref=React.createRef<HTMLInputElement>()
<input ref={
    
    this.myref}></input>
        <button onClick={
    
    ()=>{
    
    
          console.log((this.myref.current as HTMLInputElement).value);
          this.setState({
    
    
            list:[...this.state.list,(this.myref.current as HTMLInputElement).value]  //使用断言假设
          });
          (this.myref.current as HTMLInputElement).value=''
        }}>输出</button>
        <ul>
          {
    
    
            this.state.list.map(item=><li key={
    
    item}>{
    
    item}</li>)
          }

好滴，今天的文章就到这里，希望给大家带来帮助！