إدخال النص والمسودات والتحقق

function parseSeats(raw) {
  const text = typeof raw === 'string' ? raw.trim() : '';
  if (!/^[0-9]+$/.test(text)) return {ok: false, error: 'INVALID_SEATS'};
  const value = Number(text);
  return Number.isSafeInteger(value) && value >= 1 && value <= 20
    ? {ok: true, value} : {ok: false, error: 'INVALID_SEATS'};
}
console.log(JSON.stringify(parseSeats(' 04 ')));
console.log(JSON.stringify(parseSeats('21')));
console.log(JSON.stringify(parseSeats('4x')));

{"ok":true,"value":4}
{"ok":false,"error":"INVALID_SEATS"}
{"ok":false,"error":"INVALID_SEATS"}

القيمة المقبولة للأمر هي العدد4، بينما قد يبقى تمثيل التحرير04. ولا يصبح النص المعيب قيمة عددية بديلة مختلقة.

import {useState} from 'react';
import {View, Text, TextInput, Button} from 'react-native';
export default function SeatForm({parseSeats}) {
  const [draft, setDraft] = useState('');
  const [accepted, setAccepted] = useState(null);
  const [message, setMessage] = useState('');
  function preview() {
    const result = parseSeats(draft);
    if (!result.ok) { setMessage('Enter 1 through 20 seats'); return; }
    setAccepted(result.value);
    setMessage('Preview ready');
  }
  return <View>
    <Text>Seats</Text>
    <TextInput accessibilityLabel="Seats" value={draft}
      onChangeText={setDraft} keyboardType="number-pad" />
    <Button title="Preview" onPress={preview} />
    <Text>{message}</Text>
    {accepted !== null ? <Text>Seats: {accepted}</Text> : null}
  </View>;
}

A valid04 draft predicts Preview ready and Seats: 4; invalid input predicts the range message.

يتبع المحلّل المقدم عقد النموذج السابق. ولم تُنفذ لوحة مفاتيح أو عارض مكونات أو نموذج أصلي.