react 根据传入的key动态改变state

最新推荐文章于 2024-01-02 21:55:50 发布

不止三岁

最新推荐文章于 2024-01-02 21:55:50 发布

阅读量807

点赞数 1

分类专栏： JavaScript React es6

本文链接：https://blog.youkuaiyun.com/YYece/article/details/103665462

版权

React 同时被 3 个专栏收录

21 篇文章

订阅专栏

JavaScript

11 篇文章

订阅专栏

es6

4 篇文章

订阅专栏

本文探讨了在React中如何根据变量动态改变state，详细解释了使用变量作为state key的正确方法，以及遇到input的maxlength属性在type=number时不生效的问题，原因是maxlength仅在特定输入类型下有效。此外，还提到了input的pattern属性及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

存输入框输入的值

                        <Input
                            placeholder='请输入已绑定手机号'
                            value={inputPhone}
                            float
                            type="number"
                            pattern="[0-9]*"
                            onChange={(event: any) => this.handlerInput(event, 'inputPhone', 11)}/>

    // 输入
    handlerInput = (event: any, key: any, maxlength: number) => {
        let input = event.target.value;
        this.setState({
            [key]: input.length <= maxlength ? input : input.slice(0, maxlength)
        })
    };

知识点：
1、state的key是一个变量

this.setState({
            key: value
        })

这是常见的修改state的表达式，但是如果我们希望，这里的key是一个变量name，那我们应该怎么写呢？直接写this.setState({name: value})？no，这么写的话，实际上表达的意思是将name作为一个字符串来处理的this.setState({'name': value})。
正确写法应该是

this.setState({
            [key]: value
        })

这样的写法实际上是用了es6的属性名表达式(基础真重要,将表达式作为对象的属性名

2、input的maxlength属性不起作用
input的type=number时，maxlength不起作用
解决方案：

input.length <= maxlength ? input : input.slice(0, maxlength)

原因：如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

3、input的pattern属性
检查控件值的正则表达式.。pattern必须匹配整个值，而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为text, search, tel, url 或 email时，此属性适用，否则将被忽略。