Ant Design使用了getFieldDecorator正確的使用姿勢


 Select類型:
{getFieldDecorator('sceneCategoryId', {
                  rules: [{ required: true, message: '請選擇場景類型' }],
                  initialValue: sceneCategoryId
                })(
                  <Select style={{ width: '100%' }} onChange={this.typeSelect} placeholder='請選擇場景類型'
                    className='selectStyle'
                    dropdownClassName='mySelect'>
                    {this.state.selectData.map((item, i) => {
                      return (<Option key={item.SCENE_CATEGORY_ID} value={item.SCENE_CATEGORY_ID}>{item.SCENE_CATEGORY_NAME}</Option>)
                    })}
                  </Select>
                )}
 
Input類型:
{getFieldDecorator('sceneName', {
                  rules: [{ required: true, message: '請輸入場景名稱' },
                  {
                    whitespace: true,
                    message: '不能輸入空格',
                  }
                    // ,
                    // {
                    //   validator: this.validateToSceneName
                    // }
                  ],
                  initialValue: sceneName
                })(<Input onChange={this.sceneNameChange} placeholder='請輸入場景名稱' />)}
Textarea類型和Input類型一樣
      
 {getFieldDecorator('sceneDsc', {
                  rules: [{ required: true, message: '請輸入場景描述' },
                  {
                    whitespace: true,
                    message: '不能輸入空格',
                  }
                  ],
                  initialValue: sceneDsc
                })(<TextArea style={{ height: '100px' }} rows={4} onChange={this.sceneDscChange} placeholder='請輸入場景描述' />)}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM