Ioni c -Реактивное значение интерфейса равно нулю

Question

Я пытаюсь создать область ввода и получить из нее значения.

TypeError: Невозможно прочитать свойство 'value' со значением null

Теперь я использую интерфейсы, потому что ошибки ReadOnly компонента из конструктора => this.state = {значение: '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;

Answer 1

Это не то, для чего нужны интерфейсы. Вы не можете установить значения по умолчанию с интерфейсом, они только описывают данные тип .

Ошибка нулевого значения, потому что вы объявили конструктор без состояния. Как вы можете видеть здесь в источнике реакции , по умолчанию по умолчанию реагирует this.state на ноль, если ничего не дано.

Как вы можете видеть в рабочем фрагменте ниже, установка состояния с помощью начальное значение в конструкторе работает должным образом:

class ChordEditor extends React.Component {
  constructor(props){
    super(props);
    this.handleChange=this.handleChange.bind(this);
    this.state = {value: 'Type some lyrics here'}
  }

  handleChange(e){
    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>
    );
  }
}

ReactDOM.render(<ChordEditor />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />