React的简单学习,参考了技术胖的相关学习
功能添加文本框中的某些内容
import React,{Component, Fragment} from 'react'
class Xioajiejie extends Component{ constructor(props){ super(props) this.state={ inputValue:"要添加的内容", list:['111111','222222'] } } render(){ return ( <Fragment > <div > <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/> <button onClick={this.addList.bind(this)}>增加内容</button></div> <ul> { this.state.list.map((item,index)=>{ return <li key={index+item}>{item}</li> }) } </ul> </Fragment> ) } inputChange(e){ console.log(e.target.value) this.setState({ inputValue: e.target.value }) } addList(){ this.setState({ list:[...this.state.list,this.state.inputValue] }) } } export default Xioajiejie
程序运行
$ npm start//运行
程序中的import React,{Component, Fragment} from 'react',是ES6的语法-解构赋值等价于:
import React from 'react'
const Component = React.Component