const AddTodo = () => { let input; return ( <div> <form onSubmit={e => { e.preventDefault(); if (!input.value.trim()) { return; } dispatch("ADD_TODO", { newTodoContent: input.value }); input.value = ""; }} > <input ref={node => (input = node)} /> <button type="submit">Add Todo</button> </form> </div> ); }
export default function Componente(props) { const { id, btLabel, btFunction, children } = props; return ( <Form onSubmit={(e) => e.preventDefault()} id={id}> {children} <Button estilo='cta' funcao={btFunction}> {btLabel} </Button> </Form> ); }
function DateQuestion(props) { return ( <FormControl type="date" onChange={(e) => props.onAnswerChange(props.id, e.target.value)} /> ); }
const Checkbox = props => ( <CheckboxLabel className="checkbox"> <Input type="checkbox" checked={props.checked} onChange={e => props.onChecked(e.target.checked)} /> <label style={props.withText ? { marginRight: 10 } : {}}>{props.label}</label> {props.withText && props.checked && <TextInput onChange={e => props.onChangeText(e.target.value)} value={props.text} />} </CheckboxLabel> )
function SelectQuestion(props) { const answers = props.answers.map((answer, index) => <option key={index} value={answer}>{answer}</option>); return ( <FormControl componentClass="select" onChange={(e) => props.onAnswerChange(props.id, e.target.value)}> {answers} </FormControl> ); }
render() { return (<div className='App'> <div className='App-title'> Countdown to {this.state.deadline}</div> <Clock deadline={this.state.deadline} /> <Form inline className='center-block'> <FormControl className='Deadline-input' placeholder='New date' onChange={event => { this.setState({ newDeadline: event.target.value }) }} /> <Button onClick={() => this.changeDeadline()}>Submit</Button> </Form> </div>) }
render() { return ( <form onSubmit={e=>e.preventDefault()}> <input type="text" ref="username"/> <input type="password" ref="password"/> <button onClick={this.login.bind(this)}>Sign In</button> </form> ); }
connect()( ({ dispatch }) => { return <form className='add-todo' onSubmit={e => { e.preventDefault(); dispatch(addTodo(input.value)); }}> <label>Message:</label> <input ref={node => {input = node}}></input> <input type='submit' value='Continue' /> </form> } )
render() { return ( <form onSubmit={(e) => { this.props.handleSearch(this.searchTerm.value); e.preventDefault(); }}> <p className="control has-addons"> <input ref={(c) => { this.searchTerm = c; }} className="input" type="text" placeholder="Find a user" /> <button className="button" type="submit"> Search </button> </p> </form> ); }
function Form({onSubmit, children}) { return ( <form onSubmit={event => { event.preventDefault() const elementValues = getElementValues(event.target) onSubmit(elementValues) }} > {children} </form> ) }
const Login = ({ login }) => ( <form onSubmit={evt => { evt.preventDefault() login(evt.target.username.value, evt.target.password.value) } }> <input name="username" /> <input name="password" type="password" /> <input type="submit" value="Login" /> </form> )
const AddTodo = ({ addTodo }) => { let input; return ( <form onSubmit={e => { e.preventDefault(); if (!input.value || !input.value.trim()) return; addTodo(input.value); input.value = ''; }}> <input type='text' ref={ref => input = ref}/> </form> ); }
const AddTodo = () => { let input; return ( <div> <form onSubmit={e => { e.preventDefault(); if (!input.value.trim()) { return; } dispatch("ADD_TODO", { newTodoContent: input.value }); input.value = ""; }} > <input ref={node => (input = node)} /> <button type="submit">Add Todo</button> </form> </div> ); }
function TextQuestion(props) { return ( <FormControl componentClass="textarea" onChange={(e) => props.onAnswerChange(props.id, e.target.value)}></FormControl> ); }
function NumberQuestion(props) { return ( <FormControl type="number" onChange={(e) => props.onAnswerChange(props.id, e.target.value)} /> ); }