css

public/react/src/modules/courses/boards/BoardsNew.js

@@ -26,7 +26,8 @@ class BoardsNew extends Component{
 
     this.state = {
       fileList: [],
-      boards: []
+      boards: [],
+      title_num: 60
     }
   }
   addSuccess = () => {
@@ -93,7 +94,8 @@ class BoardsNew extends Component{
                   status: 'done'
                 }
               })
-              this.setState({ fileList: _fileList, board_name: data.board_name })
+          
+              this.setState({ fileList: _fileList, board_name: data.board_name, title_num: 60 - parseInt(data.subject.length) })
             }
           }
         })
@@ -228,8 +230,14 @@ class BoardsNew extends Component{
       });
   }
   // 附件相关 ------------ END
+  changeTitle=(e)=>{
+    console.log(e.target.value.length);
+    this.setState({
+      title_num: 60 - parseInt(e.target.value.length)
+    })
+  }
   render() {
-    let { addGroup, fileList, course_id } = this.state;
+    let { addGroup, fileList, course_id, title_num } = this.state;
     const { getFieldDecorator } = this.props.form;
 
     const formItemLayout = {
@@ -318,6 +326,8 @@ class BoardsNew extends Component{
                       position: 'absolute'
                     }}>置顶</Checkbox>
                   )}
+                  {/* checkbox 有个边距样式 .ant-checkbox-wrapper + span, */}
+                  <span style={{ "padding-left": 0, "padding-right": 0 }}></span>
                   {getFieldDecorator('subject', {
                     rules: [{
                       required: true, message: '请输入标题',
@@ -325,7 +335,8 @@ class BoardsNew extends Component{
                       max: 60, message: '最大限制为60个字符',
                     }],
                   })(
-                    <Input placeholder="请输入帖子标题，最大限制60个字符" className="searchViewAfter"/>
+                    <Input placeholder="请输入帖子标题，最大限制60个字符" className="searchViewAfter" 
+                      onInput={this.changeTitle} addonAfter={String(title_num)} />
                   )}
                 </Form.Item>