React Input组件绑定onChange函数联动其他组件

最新推荐文章于 2025-06-06 09:17:29 发布

Kyulin151020

最新推荐文章于 2025-06-06 09:17:29 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/a83370892/article/details/84853991

React 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍AntDesign中Input和Select组件的使用方法，包括如何设置必填项、指定输入长度及通过onChange处理数据变化。特别关注了如何在输入特定数值后自动填充Select组件的值。

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

Input组件：

<FormItem label="Account Number" labelCol={defLabelCol} wrapperCol={defLabelCol} className={GlobalStyle['MF-Form-Input']}>
    {
        getFieldDecorator('AcctId', {
            rules: [
                { required: true, message: 'Please input Account Number!' },
                { len:12, message: 'Account should be 12-digit number' },
            ],
        })(
            <Input placeholder="" 
            onChange={this.handleInputChange}/>
                        
        )
    }
</FormItem>

名为：CurCode的Select组件：

                  <FormItem
                    label=""
                    labelCol={defLabelCol} wrapperCol={defLabelCol}
                    className={GlobalStyle['MF-Form-Input']}>
                    {
                      getFieldDecorator('CurCode', {
                        initialValue:"HKD",
                        rules: [{ required: false, message: 'Please select Currency Code !' }],
                      })(
                        <Select style={{ width: 80, marginTop: 4, marginLeft: 5 }}>
                          {this.props.optionBundle['com.cncbi.mf.resources.common.CCY']}
                        </Select>
                      )
                    }
                  </FormItem>

onChange绑定的函数：

  handleInputChange = (e) =>{
    let value = e.target.value;//取到input的数据
    console.log("value is  :"+ value);
    const number = value.substring(3,6);//截取部分数字段
    console.log("number is " + number);
    if(number==100)
    this.props.form.setFieldsValue({
      CurCode: 'HKD',
    });//给CurCode组件填充数据
  }