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.length} 如果该行更改为{this.props.text.length}

，则会呈现

Answer 1

React ES6类没有Unit: nanoseconds expr min lq mean median uq max neval f.0 39 57 118.4767 78 123 23685 10000 f.a 43 61 119.5952 85 130 63523 10000 f.b 38 53 100.5252 77 120 27199 10000 f.c 39 55 100.9784 77 121 17656 10000 f.d 37 52 111.5138 75 118 78505 10000 f.e 39 57 113.1461 80 125 16111 10000 f.f 35 52 105.9245 74 117 19995 10000函数，您需要使用getInitialState()函数来设置初始状态：

constructor

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

或者您切换回constructor(props) { super(props); this.state = {text: props.text}; }

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元素的值是BETWEEN <textarea>和</textarea>。不存储为原始的“值”属性。

接下来，该值应该是STATE而不是PROPS，因为它需要更新。

最后，您可能遇到了问题，因为在handleChange中，this未正确绑定。我用'（）=＆gt;替换它this.handleChange（）'因为ES6（=＆gt;）中的胖箭头会为你解决这个问题。

  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"))

当我使用this.state

2 个答案: