React Native 0.87
Ejercicios de React Native sobre Formularios
4 ejercicios de Formularios en React Native. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿Qué recibe setName cada vez que el usuario escribe?
<TextInput value={name} onChangeText={setName} />- AEl texto completo del campo, como string
- BUn evento con e.target.value
- CSolo el último carácter pulsado
- DNada: hay que usar onChange
Ver la respuesta
Respuesta: A. El texto completo del campo, como string
onChangeText llama a la función con el texto nuevo, así que se puede pasar el setter del estado directamente. onChange también existe, pero recibe un evento nativo.
2 · Elige la respuesta · nivel 1
¿Qué componente deja al usuario escribir con el teclado?
- A<TextInput>
- B<Input>
- C<input>
- D<Text editable>
Ver la respuesta
Respuesta: A. <TextInput>
<TextInput> es el campo de texto de React Native. <input> es de la web e <Input> no existe en react-native.
3 · Ordena las líneas · nivel 1
Ordena un formulario que salude mientras escribes.
- <input value={name} onChange={setName} />
- <Text>Hola, {name}</Text>
- <TextInput value={name} onChangeText={setName} placeholder="Nombre" />
- </View>
- <View>
- );
- const [name, setName] = useState("");
- return (
- }
- function NameForm() {
Ver la respuesta
El orden correcto:
function NameForm() { const [name, setName] = useState(""); return ( <View> <TextInput value={name} onChangeText={setName} placeholder="Nombre" /> <Text>Hola, {name}</Text> </View> );}Sobran: <input value={name} onChange={setName} />
En React Native no hay etiquetas HTML: el campo de texto es TextInput y el evento cómodo es onChangeText, que entrega el texto directamente.
4 · Completa el hueco · nivel 2
Completa un Switch controlado por el estado enabled.
const [enabled, setEnabled] = useState(false); <Switch ___={enabled} ___={setEnabled} />- value
- onValueChange
- checked
- onChange
- onToggle
- selected
Ver la respuesta
Respuesta: value · onValueChange
const [enabled, setEnabled] = useState(false); <Switch value={enabled} onValueChange={setEnabled} />Switch recibe el valor en value y avisa con onValueChange, que llama a la función con el booleano nuevo. checked es el nombre en los checkbox de la web.