跟著視頻敲的代碼,但是input框里面輸入不了東西,大家?guī)兔纯礊樯?/h1>
import?React?from?'react';
class?TodoList?extends?React.Component?{
????constructor(props){
????????super(props);
????????this.state={
????????????list:[],
????????????inputValue:''
????????}
????}
????handleBtnClick(){
????????this.setState({
????????????list:[...this.state.list,this.state.inputVlue],
????????????inputVlue:?''
????????})
????}
????handleInputChange(e){
????????this.setState({
????????????inputVlue:e.target.value
????????})
????}
????render(){
????????return?(
????????????//jsx?語法
????????????<div>
????????????????<div>
????????????????????<input?value={this.state.inputValue}?onChange={this.handleInputChange.bind(this)}/>
????????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
????????????????</div>
????????????????<ul>
????????????????????{
????????????????????????this.state.list.map((item,i)=>{
??????????????????????????return?<li?key={i}>{item}</li>
????????????????????????})
????????????????????}
????????????????</ul>
????????????</div>
????????);
????}
}
export?default?TodoList;
import?React?from?'react'; class?TodoList?extends?React.Component?{ ????constructor(props){ ????????super(props); ????????this.state={ ????????????list:[], ????????????inputValue:'' ????????} ????} ????handleBtnClick(){ ????????this.setState({ ????????????list:[...this.state.list,this.state.inputVlue], ????????????inputVlue:?'' ????????}) ????} ????handleInputChange(e){ ????????this.setState({ ????????????inputVlue:e.target.value ????????}) ????} ????render(){ ????????return?( ????????????//jsx?語法 ????????????<div> ????????????????<div> ????????????????????<input?value={this.state.inputValue}?onChange={this.handleInputChange.bind(this)}/> ????????????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button> ????????????????</div> ????????????????<ul> ????????????????????{ ????????????????????????this.state.list.map((item,i)=>{ ??????????????????????????return?<li?key={i}>{item}</li> ????????????????????????}) ????????????????????} ????????????????</ul> ????????????</div> ????????); ????} } export?default?TodoList;
2019-07-20
import? React,{Component} from 'react';