В React-Native поле TextInput не позволяет мне редактировать или вводить новый текст - PullRequest
Новая
       12

В React-Native поле TextInput не позволяет мне редактировать или вводить новый текст

1 голос
/ 23 октября 2019

Я заметил, что когда я пытаюсь что-то ввести в поле ввода текста, оно автоматически удаляется. Я сузился до проблемы, связанной с полем значения, и комментирование позволяет мне вводить текст, но я не уверен, в чем может быть проблема. 

    import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  const [enteredGoal, setEnteredGoal] = useState('');

  const goalInputHandler = (enteredText) => {
    setEnteredGoal(enteredGoal);
  };

  const addGoalHandler = () => {
    console.log(enteredGoal);
  };

  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput 
          placeholder="Course Goal"
          style={styles.input}
          onChangeText={goalInputHandler}
          value={enteredGoal}
        />
        <Button title='Add' onPress={addGoalHandler} />
      </View>
      <View />
    </View>
  );
}

1 Ответ

0 голосов
/ 23 октября 2019

Две причины:

  1. переменные в goalInputHandler() не совпадают. Передача enteredText, но попытка использования enteredGoal.
  2. goalInputHandler() ничего не возвращает. Вам нужно использовать круглые скобки вместо фигурных скобок или добавить оператор возврата до setEnteredGoal().

Правильный код: 

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  const [enteredGoal, setEnteredGoal] = useState('');

  const goalInputHandler = (enteredText) => (
    setEnteredGoal(enteredText);
  );

  const addGoalHandler = () => (
    console.log(enteredGoal);
  );

  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput 
          placeholder="Course Goal"
          style={styles.input}
          onChangeText={goalInputHandler}
          value={enteredGoal}
        />
        <Button title='Add' onPress={addGoalHandler} />
      </View>
      <View />
    </View>
  );
}
...