react学习-小案例

目标如下

参考代码

import React from 'react';

export default class Hello extends React.Component {
  constructor () {
    super()
  }
  state = {
    name: '',
    msg: '',
    list: [{name:'NIKE', msg: '一切皆有可能'}]
  }
  hMsg = e => {
    this.setState({msg: e.target.value})
  }
  hName = e => {
    this.setState({name: e.target.value})
  }
  add = ()=> {
    const {list, name, msg} = this.state
    list = [...list, {name,msg}]
    this.setState({list})
  }
  render () {
    const {state:{list, name, msg}, add, hName, hMsg} = this
    return (
      <div>
        <input placeholder="请输入名字" type="text" value={name} onChange={hName} />
        <br/>
        <textarea placeholder="请输入slog" value={msg} onChange={hMsg}/>
        <br/>
        <button onClick={add}>添加</button>
        {list.map(item=><p>{item.name}-{item.msg}</p>)}
      </div>)
  }
}