Javascript 离子反应界面值为空

我试图创建一个输入区域，并从中获取值

TypeError:无法读取null的属性“值”

现在我正在使用接口，因为构造函数=>this.state={value:'xx'}中的组件只读错误

interface AbcState {
    value: 'Type some lyrics here'
 }

class ChordEditor extends React.Component<{}, AbcState> {
   constructor(props: any){
       super(props);
       this.handleChange=this.handleChange.bind(this);

   }

   handleChange(e: any){
    this.setState({
        value: e.target.value
    });
   }


 render (){
   return (
   <div className="chord-editor">
       <div className="panel">
        <h3>Input</h3>
        <textarea style={{width: "100%", height: "100%"}}
        onChange={this.handleChange}
        defaultValue={this.state.value}></textarea>
       </div>
       <div className="panel">

       </div>
   </div>
   );
 }
}

export default ChordEditor;

接口AbcState{
值：'在此处键入一些歌词'
}
类ChordEditor扩展React.Component{
构造器（道具：任何）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
handleChange（e:任何）{
这是我的国家({
价值：即目标价值
});
}
渲染（）{
返回(
输入
);
}
}
导出默认ChordEditor；

这不是接口的用途。不能使用接口设置默认值，它们只描述数据类型

空值错误是因为您声明了一个没有状态的构造函数。如您所见，如果未给出任何信息，react将默认

this.state

为null

正如您在下面的工作代码段中所看到的，在构造函数中使用初始值设置state确实可以按预期工作：

类ChordEditor扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.state={value:'在此处键入一些歌词'}
}
手变（e）{
这是我的国家({
价值：即目标价值
});
}
渲染（）{
返回(
输入
);
}
}
ReactDOM.render（，document.getElementById（'root'））

类型“Readonly”上不存在任何属性“value”，我正在使用Ionic，您是否将接口更改为

value:string

而不是值？