<center>React实现简易TodoList</center>

悠悠 2023-10-09 12:31 26阅读 0赞

class TodoList extends Component { 
    /**render函数返回的JSX模板最外层只能由一个包裹元素 * 使用Fragment做占位符，只起包裹作用，并不会渲染成DOM元素 */
        render() { 
            return (
                <Fragment>
                    <div>
                        <input />
                        <button>submit</button>
                    </div>
                    <ul>
                        <li>one</li>
                        <li>two</li>
                    </ul>
                </Fragment>
            )
        }
    }
    
    export default TodoList

--------------------

**响应式设计**和数据绑定

响应式：数据驱动视图，数据一变化，页面就会跟着变化

双向数据绑定：通过**value**属性和**onChange**方法，实现双向数据绑定

//在state中定义数据
    constructor(props) { 
        super(props)
        this.state = { 
            inputValue: 'hello'
        }
    }
    //在JSX中进行数据绑定
    <input 
        value={ this.state.inputValue} 
        onChange={ this.handleInputChange.bind(this)} 
    />
    //通过onChange方法实现数据双向绑定
    handleInputChange(e) { 
        this.setState({ 
            inputValue: e.target.value
        })
    }

--------------------

**实现增加和删除功能**

<ul>
        { 
            this.state.list.map((item, index) => { 
                return <li key={ index} onClick={ this.handleItemClick.bind(this, index)}>{ item}</li>
            })
        }
    </ul>
    handleBtnClick() { 
        this.setState({ 
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
    handleItemClick(index) { 
        const list = [...this.state.list]
        list.splice(index, 1)
        this.setState({ 
            list: list
        })
    }