render() { const { onAdd, onEdit, onDelete, onHistory, addEnable, editEnable, deleteEnable } = this.props return ( <Button.Group> <Button onClick={onEdit} icon='edit'></Button> {/*<Button onClick={onDelete} icon='minus'></Button>*/} <Button onClick={onHistory} icon='info-circle-o'></Button> </Button.Group> ) }
form.getFieldDecorator('formType', { initialValue: formType, rules: [{ required: true, message: '请选择直播类型!' }], })( <Radio.Group onChange={handleChangeFormType}> {formTypes.map((values, index) => <Radio key={index} value={String(values.id)} disabled={!!(formId)} >{values.name}</Radio>) } </Radio.Group> )
render() { const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form; // Only show error after a field is touched. const usernameError = isFieldTouched('username') && getFieldError('username'); const passwordError = isFieldTouched('password') && getFieldError('password'); return ( <Row> <Col span={8} offset={8}> <Form layout="vertical" onSubmit={this.handleSubmit}> <Radio.Group defaultValue="horizontal" onChange={this.handleFormLayoutChange}> <Radio.Button value={FORM_LOGIN}>Signin</Radio.Button> <Radio.Button value={FORM_REGISTER}>Register</Radio.Button> </Radio.Group> <br/><br/> {this.state.showLoginForm ? <LoginForm/> : <RegisterForm/>} </Form> </Col> </Row> ); }
render() { const { value } = this.props; return ( <Row type="flex" align="middle"> <Col span={2}>Toggle example:</Col> <Col span={3} offset={1}> <Switch checked={value} onChange={this.onChange} /> </Col> <Col span={18}> <Button.Group> <Button disabled={value} onClick={this.onOpen} type="primary"> ON </Button> <Button disabled={!value} onClick={this.onClose}> OFF </Button> </Button.Group> </Col> </Row> ); }
function Component({ id, visible, data, onOK, onCancel, onChange }) { const handleChange = (e) => { console.log(e) onChange(e.target.value) } return ( <Modal title="选择栏目类型" width={700} visible={visible} onOk={onOK} onCancel={onCancel} > <Radio.Group onChange={handleChange} value={id}> <Row gutter={16}> {data.map((value, index) => <Col className={styles.card} span={6} key={index}> <img src={value.img_url} alt={value.value} /> <Radio disabled={false} value={value.key}>{value.value}</Radio> </Col>)} </Row> </Radio.Group> </Modal> ) }
function RadioBox(props) { const [Value, setValue] = useState(0); const renderRadioBox = () => props.list && props.list.map((value) => ( <Radio key={value._id} value={value._id}> {value.name} </Radio> )); const handleChange = (event) => { setValue(event.target.value); props.handleFilters(event.target.value); }; return ( <div> <Collapse defaultActiveKey={["0"]}> <Panel header="Price" key="1"> <Radio.Group onChange={handleChange} value={Value}> {renderRadioBox()} </Radio.Group> </Panel> </Collapse> </div> ); }
const Home = (props) => { const [username, setUsername] = useState(""); return ( <Row justify="center" align="middle" type="flex" style={{ minHeight: "100vh", background: "#ddd" }} > <Col xs={12}> <Card> <Input.Group> <Input onChange={(e) => setUsername(e.target.value)} /> </Input.Group> <Row type="flex" justify="center" style={{ marginTop: "2rem" }}> <Button onClick={() => navigate("/repo-list/" + username)}> Submit </Button> </Row> </Card> </Col> </Row> ); }
render() { return ( <Row type="flex" align="middle"> <Col span={2}>Progress Example:</Col> <Col span={5} offset={1}> <Progress type="circle" percent={this.props.pos} /> </Col> <Col span={16}> <Button.Group> <Button icon={<PlusOutlined />} type="primary" onClick={this.onIncrease} > Increase </Button> <Button icon={<MinusOutlined />} onClick={this.onDecrease}> Decrease </Button> <Button type="danger" onClick={this.onReset}> Reset </Button> </Button.Group> </Col> </Row> ); }
render() { const { cron, ...rest } = this.props; return ( <> <Button.Group> {cron.running ? ( <Button onClick={this.stopCron} type="danger"> Auto refresh Stop </Button> ) : ( <Button type="primary" onClick={this.startCron}> Auto refresh Start </Button> )} <Button onClick={this.resetCron}>Reset</Button> </Button.Group> <Table {...rest} /> </> ); }
template(css) { const { onAdd, onEdit, onDelete, onHistory, addEnable, editEnable, deleteEnable } = this.props return ( <Button.Group> <Button onClick={onEdit} icon='edit'></Button> <Button onClick={onDelete} icon='minus'></Button> <Button onClick={onHistory} icon='info-circle-o'></Button> </Button.Group> ) }
render() { const { cron, ...rest } = this.props; return ( <> <Button.Group> {cron.running ? ( <Button onClick={this.stopCron} type="danger"> Auto refresh Stop </Button> ) : ( <Button type="primary" onClick={this.startCron}> Auto refresh Start </Button> )} <Button onClick={this.resetCron}>Reset</Button> </Button.Group> <Table {...rest} /> </> ); }
render() { const { value } = this.props; return ( <Row type="flex" align="middle"> <Col span={2}>Toggle example:</Col> <Col span={3} offset={1}> <Switch checked={value} onChange={this.onChange} /> </Col> <Col span={18}> <Button.Group> <Button disabled={value} onClick={this.onOpen} type="primary"> ON </Button> <Button disabled={!value} onClick={this.onClose}> OFF </Button> </Button.Group> </Col> </Row> ); }
render() { return ( <Row type="flex" align="middle"> <Col span={2}>Progress Example:</Col> <Col span={5} offset={1}> <Progress type="circle" percent={this.props.pos} /> </Col> <Col span={16}> <Button.Group> <Button icon={<PlusOutlined />} type="primary" onClick={this.onIncrease} > Increase </Button> <Button icon={<MinusOutlined />} onClick={this.onDecrease}> Decrease </Button> <Button type="danger" onClick={this.onReset}> Reset </Button> </Button.Group> </Col> </Row> ); }