美文网首页
react 添加

react 添加

作者: 半夜成仙 | 来源:发表于2020-07-09 14:03 被阅读0次


  <Button type="primary" onClick={this.showModal}>添加任务</Button>
                        {/*添加弹框*/}
                        <Modal
                            visible={visible}
                            title="添加任务信息"
                            onCancel={this.hideModal}
                            footer={null}
                        >
                            <Form
                                style={{marginLeft:'-12px'}}
                                labelCol={{ span: 6 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                onFinish={this.onAddFinish}
                            >
                                <Form.Item name='task_name' label="任务名称">
                                    <Input  placeholder="任务名称"  />
                                </Form.Item>
                                <Form.Item name='task_type' label="Select">
                                    <Select>
                                        <Option value="新手任务" >新手任务</Option>
                                        <Option value="日常任务" >日常任务</Option>
                                        <Option value="活动任务" >活动任务</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item name='task_reward' label="任务奖励">
                                    <Input  placeholder="任务奖励" />
                                </Form.Item>
                                <Form.Item name='task_time' label="有效期">
                                    <RangePicker
                                        locale={locale}/>
                                </Form.Item>
                                <Form.Item name='task_rules' label="任务规则">
                                    <TextArea
                                        placeholder="任务规则"
                                        autoSize={{ minRows: 3, maxRows: 5 }}
                                    />
                                </Form.Item>
                                <Form.Item style={{margin:'20px 0 0 120px '}} >
                                    <Button key="back" onClick={this.handleCancel}>
                                        取消
                                    </Button>,
                                    <Button key="submit" type="primary" htmlType="submit"  onClick={this.handleOk}>
                                        提交
                                    </Button>,
                                </Form.Item>
                            </Form>
                        </Modal>



 constructor(prors){
        super(prors)
        this.state={   
            visible: false,// 模态框显隐藏
        }
    }

 // 错误提示
   error = (val) => {
        message.error(val);
    };
    // 成功提示
    success = (val) => {
        message.success(val);
    };
     弹框显示
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    hideModal = () => {
        this.setState({
            visible: false
        });
    };

     // 点击确认
    handleOk = () => {
        this.setState({
            visible: false,
        });

    };

    // 点击取消
    handleCancel = ()=> {
        this.setState({
            visible: false,
        });
    };

// 添加
    onAddFinish = values => {
        console.log('Received values of form: ', values);
        axios.post(api.task.add,{
            task_name:values.task_name,
            task_type:values. task_type,
            task_reward:values.task_reward,
            task_isup:1,
            task_starttime:values.task_time[0]._d ,
            task_endtime:values.task_time[1]._d,
            task_rules:values. task_rules,

        }).then((res)=>{
            if (res.data.code==200){
                this.success('添加成功')
            }
        }).catch((err)=>{
            console.log(err)
        })
    }

相关文章

网友评论

      本文标题:react 添加

      本文链接:https://www.haomeiwen.com/subject/ehajcktx.html