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

存输入框输入的值

                        <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时，此属性适用，否则将被忽略。