react native中文本輸入的條件渲染

Question

你如何有條件地呈現一個 textInput 使得當 textInput 字符中的值text小於 6 時，它會在用戶單擊確定按鈕時記錄錯誤

const [text, setText] = useState('')
<TextInput
  style={styles.textInputStyle}
  value={text}
  onChangeText = {(text) => setText(text)}
  placeholder="Text"
  placeholderTextColor="#60605e" />
<TouchableOpacity style={styles.button}
  onPress={() => {setText(text)} }>
  <Text style={styles.buttonTitle}>OK</Text>
</TouchableOpacity>

Answer 1

你的onPress回調可以管理這個。 它需要檢查text.length < 6 ，然后根據結果進行分支。 它可能看起來像這樣（我刪除了樣式邏輯以展示回調）：

const MyComponent = () => {
  const [text, setText] = useState('');

  return (
    <>
      <TextInput
         value={text}
         onChangeText = {(text) => setText(text)}
      />
      <TouchableOpacity
        onPress={() => {
          if(text.length < 6) {
            // Alert user of invalid input
            Alert.alert("Input must be less than 6 characters!") ;
            return;
          }
          // ... continue on to the desired task
        }}
      >
        <Text>OK</Text>
      </TouchableOpacity>
    </>
  );
}