render() { return ( <div className='form-content'> <div>{this.props.product.title}</div> <Form.Item label="Title"> <Field as={Input} name='title' disabled={!editable} /> </Form.Item> <Form.Item label="Description"> <Field as={Input.TextArea} name='description' rows={5} disabled={!editable} /> </Form.Item> <Form.Item label="Price"> <Field as={Input} name='price' disabled={!editable} /> </Form.Item> </div> ); }
const FormInputField = ({ field, // { name, value, onChange, onBlur } form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. InputType, hasFeedback, hideErrorMessage, ...props }) => { const errorMessage = hideErrorMessage ? false : touched[field.name] && errors[field.name]; let inputStatus; if (errorMessage) { inputStatus = 'error'; } else if (touched[field.name] && field.value) { inputStatus = 'success'; } return ( <Form.Item help={errorMessage} validateStatus={inputStatus} hasFeedback={hasFeedback}> <InputType {...field} {...props}> {props.children} </InputType> </Form.Item> ); }
function Add(props) { let title; let desc; let image; return (<div> <Form> <Form.Item label="Title"> <Input placeholder="Title" id="title" onChange={(e)=>{title=e.target.value}} /> </Form.Item> <Form.Item label="Description"> <Input placeholder="Description" id="desc" onChange={(e)=>{desc=e.target.value}} /> </Form.Item> <Form.Item label="Image"> <Input placeholder="Image" id="image" onChange={(e)=>{image=e.target.value}} /> </Form.Item> <Form.Item wrapperCol={{ span: 12, offset: 5 }}> <Button type="primary" onClick={()=>{props.savePhoto({image,desc,title})}}> Submit </Button> </Form.Item> </Form> </div>) }
render() { return ( <Form onSubmit={this.logIn.bind(this)} className="login-form"> <Form.Item className="form-item"> <div className="form-label">Email</div> <Input prefix={<Icon type="mail" className="input-icon" />} type="email" placeholder="Email" ref="email" /> </Form.Item> <Form.Item className="form-item"> <div className="form-label">Password</div> <Input prefix={<Icon type="lock" className="input-icon" />} type="password" placeholder="Password" ref="password" /> </Form.Item> <Form.Item className="form-item"> <Button type="primary" htmlType="submit" className="form-button" size="large"> Log in </Button> </Form.Item> </Form> ); }
render() { return ( <FormWrapper style={{ paddingLeft: 0 }}> <Form.Item help={this.props.errorMessage} validateStatus={ this.props.errorMessage ? 'error' : 'success' } {...formItemLayout} > <Dragger showUploadList={false} accept={`${EXCEL_TYPE}, ${EXCEL_EXTENSION}`} customRequest={this.handleRequest} name="file" > <p className="ant-upload-drag-icon"> <Icon type="inbox" /> </p> <p className="ant-upload-text"> {i18n('importer.form.hint')} </p> </Dragger> </Form.Item> </FormWrapper> ); }
function BlogAdd(props){ let title; let desc; let image; return <div> <Form> <Form.Item label="title" > <Input placeholder="input placeholder" onChange={(e)=>{title=e.target.value}}/> </Form.Item> <Form.Item label="description"> <ReactQuill onChange={(value)=>{desc=value}} /> </Form.Item> <Form.Item label="image"> <Input placeholder="input placeholder" onChange={(e)=>{image=e.target.value}}/> </Form.Item> <Form.Item> <Button type="primary" onClick={()=>{props.addBlog({title,desc,image})}}>Submit</Button> </Form.Item> </Form> </div> }
const FormInputField = ({ field, // { name, value, onChange, onBlur } form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. InputType, hasFeedback, hideErrorMessage, ...props }) => { const errorMessage = hideErrorMessage ? false : touched[field.name] && errors[field.name]; let inputStatus; if (errorMessage) { inputStatus = 'error'; } else if (touched[field.name] && field.value) { inputStatus = 'success'; } return ( <Form.Item help={errorMessage} validateStatus={inputStatus} hasFeedback={hasFeedback}> <InputType {...field} {...props}> {props.children} </InputType> </Form.Item> ); }