My React Component разбивается, когда я использую this.state

Question

Я пытаюсь написать простой компонент React, который подсчитывает количество символов, введенных в текстовое поле. Компонент визуализируется отлично, но когда я пытаюсь ссылаться на this.state, компонент разбивается, и экран пуст.

Вот код:

HTML:

<div id="content"> 

</div> 

CSS:

#content { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

body { 
    background-color: #F1FAEE; ; 
} 

h1 { 
    font-family: Avenir; 
    color: black; 
    font-size: 44px; 
} 

JavaScript:

class Box extends React.Component { 

    getInitialState() { 
    return { 
     text: this.props.text 
    } 
    } 

    handleChange(event) { 
    this.setState({ 
     text: event.target.value 
    }) 
    } 

    render() { 
    return (
     <div> 
     <h1>This App Counts Letters</h1> 
     <textarea value = {this.props.text} onChange = {this.handleChange}> </textarea> 
     <h1>{this.state.text.length}</h1> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<Box text = "I find this frustrating"/>,document.getElementById("content")) 

вопрос с {this.state.text. длина} вещей делают, если эта строка заменяется на {} this.props.text.length

Answer 1

React ES6 классы уже не надо в getInitialState() функцию, вам нужно использовать функцию constructor, чтобы установить начальное состояние:

constructor(props) { 
    super(props); 
    this.state = {text: props.text}; 
} 

https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Или вернуться к React.createClass()

Answer 2

Существовали несколько заметок, чтобы сделать так, я просто хочу, чтобы переписать и комментарий, как я иду.

Я не тестировал его, но это должно сработать.

class Box extends React.Component { 

    // getInitialState() {} should be replaced in ES6 with: 
    constructor(props) { 
    super(props); 
    this.state = { 
     text: props.text 
    } 
    } 

    // This looks good. 
    handleChange(event) { 
    this.setState({ 
     text: event.target.value 
    }) 
    } 

Значение Textarea элемента находится между <textarea> и </textarea>. Не сохраняется как атрибут «значение», как вы его первоначально.

Далее, это значение должно быть STATE, а не PROPS, поскольку оно необходимо обновить.

И, наконец, у вас, вероятно, проблемы, потому что в handleChange this не связан правильно. Я заменил его на «() => this.handleChange()», потому что жирная стрелка в ES6 (=>) исправит это для вас.

render() { 
    return (
     <div> 
     <h1>This App Counts Letters</h1> 
     <textarea onChange = {() => this.handleChange()}>{this.state.text}</textarea> 
     <h1>{this.state.text.length}</h1> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<Box text = "I find this frustrating"/>,document.getElementById("content"))