function categoryFormElements(props){ return ( <form onSubmit={props.handleSubmit}> <Field name="name" type="text" validate={required()} component={inputField} label="Category Name"/> <Field name="description" type="text" component={inputField} label="Description"/> <button type="submit">Submit</button> </form> ) }
function WebhookForm(props) { return ( <form> <Field name="endpoint_url" type="text" validate={[required(), url()]} component={inputField} placeholder="Endpoint URL: https://"/> {/*<Field name="async_lifecycle" type="select" component={inputField} placeholder="Asynchronous"/>*/} <Field className="form-control" name="async_lifecycle" component="select"> <option value="True">Asynchronous</option> <option value="False">Synchronous</option> </Field> <div className="text-right m-t-15"> <Buttons btnType="primary" text="Add endpoint" onClick={props.handleSubmit} type="submit" value="submit"/> </div> </form> ) }
<Field key={index} name={`${customProperty}.data.value`}
function BillingInfo(props) { return ( <form> <CardSection/> <Field name="name" type="text" component={inputField} placeholder="Name on the card"/> <Field name="address_line1" type="text" component={inputField} placeholder="Address"/> <Field name="address_city" type="text" component={inputField} placeholder="City"/> <Field name="address_state" type="text" component={inputField} placeholder="State"/> {/*<button type="submit">Submit</button>*/} <div className="text-right"> <Buttons btnType="primary" text="Save Card" onClick={props.handleSubmit} type="submit" value="submit"/> </div> </form> ) }
function Category(props){ return ( <form onSubmit={props.handleSubmit}> <Field name="name" type="text" component={inputField} label="Name" validate={required()}/> <Field name="description" type="text" component={inputField} label="Description (Optional)"/> <div id="service-submission-box" className="button-box right"> <button className="btn btn-rounded btn-primary" type="submit"> Submit </button> </div> </form> ) }
// ===== redux form์ ์ ์ฉํ input const Input = (props) => ( <Field {...props} component={renderInput} /> )
function ReduxForm({ handleSubmit }) { return ( <div> <h3>Redux Form (redux-form)</h3> <form onSubmit={handleSubmit}> <Field name="name" type="text" component={renderField} label="Name:" /> <input type="submit" value="Submit" /> </form> </div> ); }
renderFields() { return _.map(formFields, ({label, name}) => { return <Field component={SurveyField} type="text" label={label} name={name} key={name}/> }); }
const TransformerArgListItem = ({ fieldName, transformerArg }) => ( <Field className={`transformer_arg_${transformerArg.name}`} name={`${fieldName}.value`} type="text" component={FormTextField} label={transformerArg.name} multiLine={transformerArg.type === 'text'} /> )
const SignInForm = (props) => { const { handleSubmit } = props; const errors = props.errors <= 0 ? null : renderErrors(props.errors); return ( <form onSubmit={handleSubmit}> {errors} <Field name="email" type="email" component={renderField} label="Email" /> <Field name="password" type="password" component={renderField} label="Password" /> <button type="submit" className="btn btn-primary">Sign in</button> </form> ); }
let ContactForm = props => { const {handleSubmit} = props; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="firstName">First Name</label> <Field name="firstName" component="input" type="text"/> </div> <button type="submit">Submit</button> </form> ) }
render(){ return ( <form onSubmit={this.props.handleSubmit(this.onSubmit)} className="ui form error"> <Field name="title" component={this.renderInput} label="Enter Title" /> <Field name="description" component={this.renderInput} label="Enter Description" /> <button className="ui button primary">Submit</button> </form> ) }
const EditProfileForm = (props) => { return ( <Form onSubmit={props.handleSubmit(props.onSubmit)}> <Field name="name" label="Name:" component={ReduxField}/> <Field name="lastName" label="Last name:" component={ReduxField}/> <Field name="nickName" label="Nick name:" component={ReduxField}/> <Button type="submit" onClick={props.modalClose} theme="info">Save</Button> </Form> ) }
let PostsForm = (props) => { return( <form onSubmit={props.handleSubmit}> <Field name="singlePost" component={TextareaWrapper} /> <button>add post</button> </form> ) }
renderFields(){ return _.map(formFields, ({label,name, toolTip}) => { return <Field key={name} component={SurveyField} type="text" label={label} name={name} toolTip={toolTip}/> }) }