第七節(jié) 表單 及 刪除

現(xiàn)在我要做一個(gè)輸入框來添加一個(gè)人的列表信息，同時(shí)對(duì)列表可以進(jìn)行刪除操作！ 一次性代碼擼完

//添加一個(gè)新的組件 AddUser 組件  此時(shí)我們有3個(gè)組件 MyApp List AddUser
class MyApp extends React.Component{
    constructor(props){
        super(props);
        this.addUserList = this.addUserList.bind(this);
        this.deleteUser = this.deleteUser.bind(this);
        this.state = {
            userList: ['張三','李四','王五']
        }
    }
    addUserList(uName){
        //做一個(gè)驗(yàn)證
        if(uName === ''){
            return '輸入的內(nèi)容不能為空！'
        }else if(this.state.userList.includes(uName)){
            return '輸入的內(nèi)容重復(fù)，請(qǐng)重新輸入！'
        }
        else{
            this.setState( (pre) => {
                return{
                    userList: pre.userList.concat([uName])
                }
            })
        }
    }
    deleteUser(i){
        this.setState( (pre)=>{
            return {
                userList: pre.userList.filter( (item,index)=>{
                    return i!==index;
                })
            }
        })
    }
    render(){
        return (
            <div>
                <List userList={ this.state.userList } deleteUser={ this.deleteUser } />
                <AddUser addUserList={ this.addUserList }/>
            </div>
        )
    }
}
const List = (props) => {
    return(
        <div>
            <ul>
                {   //其中注意的是 onClick 中返回的是個(gè)函數(shù)如果直接寫就執(zhí)行返回的是執(zhí)行的結(jié)果 
                    props.userList.map( (item,index)=>{
                        return  <li key={index}>
                                    <span>{item}</span>
                                    <button onClick={ ()=>{ props.deleteUser(index) } }> x </button>
                                </li>
                    })
                }
            </ul>
        </div>
    )
}
class AddUser extends React.Component{
    constructor(props){
        super(props);
        this.FormAddUser = this.FormAddUser.bind(this);     //注意
        this.state = {
            error: undefined
        }
    }
    FormAddUser(e){
        e.preventDefault();     //注意
        let uName = e.target.elements.userName.value;   //注意
        let error = this.props.addUserList(uName);  //注意
        this.setState( ()=>{
            return {
                error           //驗(yàn)證  注意
            }   
        })
        e.target.elements.userName.value = '';
    }
    render(){
        return (
            <div>
                { this.state.error && <p>{this.state.error}</p> }
                <form onSubmit={this.FormAddUser}>
                    <input type="text" name="userName" autoComplete="off"/>
                    <button>addUser</button>
                </form>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />,document.getElementById('app'));

注意：

1. 在表單中我們首先要阻止默認(rèn)事件，然后獲取表單內(nèi)容 e.target.elements.name獲取表單元素
2. 在刪除每一項(xiàng)的時(shí)候，如果我們直接傳入的函數(shù)帶有參數(shù)會(huì)立即只想，我們可以寫個(gè)回調(diào)函數(shù) return該函數(shù)
3. 其中表單驗(yàn)證中，我們?cè)贛yApp中判斷是否符合條件，如果不符合return相關(guān)信息，然后對(duì)頁(yè)面進(jìn)行提示
4. 在我們操作state數(shù)據(jù)的時(shí)候，千萬不能直接改變?cè)瓟?shù)據(jù)，通過賦值完成。