ReactJS表单handleChange

    handleInputChange = (event) => {
        const target = event.target;
        const type = target.type;
        const value = String.prototype.trim.call(target.value);
        const name = target.name;
        if (type === 'checkbox') {
            if (this.state.formData[name] === undefined) { // 创建
                this.setState(() => ({
                    formData: Object.assign(this.state.formData, {
                        [name]: [value],
                    }),
                }));
            } else {
                const valueIndex = this.state.formData[name].indexOf(value);
                if (valueIndex < 0) { // 查找是否已经被勾选
                    this.setState((prevState) => ({
                        formData: Object.defineProperty(this.state.formData, [name], {
                            value: prevState.formData[name].concat([value]),
                        }),
                    }));
                } else {
                    const arr = this.state.formData[name];
                    arr.splice(valueIndex, 1); // 去掉已经选择的
                    this.setState(() => ({
                        formData: Object.defineProperty(this.state.formData, [name], {
                            value: arr,
                        }),
                    }));
                }
            }
        } else {
            this.setState(() => ({
                formData: Object.assign(this.state.formData, {
                    [name]: value,
                }),
            }));
        }
    }

 

转载于:https://www.cnblogs.com/biubiuxixiya/p/8206138.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值