Day 13 - React: state

虽然昨天很低落，但我们要记得 Props 是唯读的！（我有写喔！）

但我们要做的网页不是静态资料（如果是就不用在这学了），所以，React提供了state，它是一个物件的存在，而且可以在 class components 里增加属性。

例如：用上我最爱的那个 index.html增加 div#root8 (7我会找时间补完在前一篇）

class Hello3 extends React.Component {
  state = {
    name: "Trista",
    age: 37,
    title: "fool"
  }
  render() {
    return <p>Hello, I'm {this.state.name} and I'm {this.state.age} years old, I feel I like a {this.state.title}.</p>
  }
}
const el5 = <Hello3 />
ReactDOM.render(
  el5,
  document.getElementById('root8')
);

这里我们用state去定义各种属性（用 , 来分隔），就可以得到如下的结果：

注意到了吗，state可以有多个属性能呼叫。

2021-09-29 update

让我们用按钮做点小微调。

class Hello4 extends React.Component {
  state = {
    name: "Trista",
    age: 37,
    title: "fool"
  }
  change = () => {
    this.setState({
      name: "Stzero",
      age: 10,
      title: "boy"
    })
  }
  render() {
    return <p>Hello, I'm {this.state.name} and I'm {this.state.age} years old, I feel I like a {this.state.title}.<br /><button {this.change}>Change Value</botton></p>
  }
}
const el7 = <Hello4 />
ReactDOM.render(
  el7,
  document.getElementById('root10')
);