~~~ import React,{Component} from 'react'; class App extends Component { //動態顯示時數據 構造器 constructor(props) { super(props); this.state = { // msg: "hello react" value:"hello world", list:[] } } // 固定格式返回一個html1 render() { return ( <div> <input value={this.state.value} onChange={this.handleChange.bind(this)}/> <button onClick={this.handleAdd.bind(this)}>增加</button> <ul> {this.state.list.map((item, index) => { return <li key={index} onClick={this.handleDelete.bind(this,index)}>{item}</li> })} </ul> </div> ); } handleChange(e) { this.setState({ value: e.target.value }) } handleAdd(){ var list =this.state.list; if(!list.includes(this.state.value)){ list.push(this.state.value); } this.setState({ list, value:"" }) } handleClick() { var list = this.state.list; //不要直接修改statezhong if (!list.includes(this.state.value)) { list.push(this.state.value); } this.setState({ list, value:"" }); } handleDelete(index){ //不能直接修改state中的list var list = this.state.list; list.splice(index,1); this.setState({ list }) } }; export default App; ~~~