КОДЕКС
Выставка React Native Todo, часть 3
Создайте компонент AddTask, чтобы вставить новую задачу
В этой статье мы собираемся создать компонент AddTask, который является полем ввода для пользователя для создания новой задачи.
Полное содержание:
Часть 1 — Создание базового макета и компонента заголовка
Часть 2 — Создание компонента элемента
Часть 3 — Создание компонента AddTask для вставки новой задачи
Часть 4 — Предупреждать, если есть ошибка
Часть 5 — Закрыть клавиатуру, когда вы щелкаете мышью вдали от клавиатуры
Часть 6 — Expo React Native Часть 6 — удалить элемент
Часть 7 — Использование flexBox для устранения проблемы с выключенным экраном.
Связанный курс:
Сначала в папке компонентов мы создаем AddTask.js.
Внутри AddTask.js мы добавляем компонент TextInput, чтобы пользователь мог добавить новую задачу.
<View>
<TextInput
style={styles.input}
placeholder="Add new task"
onChangeText={changeHandler}
/>
</View>
Мы создаем функцию changeHandler, чтобы отслеживать, что вводит пользователь. Для этого нам также нужно добавить состояние вверху.
const [text, setText] = useState('');
const changeHandler = val => {
setText(val)
}
Добавляем стиль внизу
const styles = StyleSheet.create({
input: {
margin: 10,
paddingVertical: 6,
borderBottomWidth: 1,
borderBottomColor: 'grey'
}
})
Вернемся к App.js, мы импортируем компонент AddTask.
import AddTask from './components/AddTask';
<SafeAreaView style={styles.container}>
<Header />
<View style={styles.content}>
<AddTask/>
<View style={styles.list}>
<FlatList
data={tasks}
renderItem={({ item }) => (
<Task item={item} />
)}
/>
</View>
</View>
</SafeAreaView>
Создайте кнопку для добавления новой задачи
Теперь мы добавляем кнопку ниже ввода текста. Установите заголовок «добавить задачу» и цвет «синий».
<Button title="add task" color="blue" onPress={() => console.log(text)} />
Если мы введем «ckmobile», а затем нажмем кнопку «Добавить задачу», он должен записать это в консоль.
Создать функцию добавления задачи
Мы хотим взаимодействовать с «задачами» состояния, но не можем сделать это внутри компонента AddTask, потому что состояние находится внутри компонента App.
Назад к App.js
const addTask = text => {
setTasks(prevTodos => {
return [{ task: text, id: uuidv4() }, ...prevTodos]
})
}
Мы собираемся вернуть новый массив, который включает старый массив с новым элементом.
Чтобы сгенерировать новый идентификатор, мы используем uuid пакета npm. Мы создаем идентификатор с помощью uuidv4().
Теперь нам нужно вызвать функцию addTask из компонента addTask. Мы должны передать addTask в качестве реквизита для компонента addTask.
<AddTask addTask={addTask} />
Мы можем вызвать функцию addTask внутри компонента addTask, она принимает текст в эту функцию.
<Button title="add task" color="blue" onPress={() => addTask(text)} />
Итак, теперь мы можем добавить новую задачу в приложение.
Бесплатные уроки на Youtube
Подписывайтесь на нас:
