Получение значений из FormPanel в ExtReact 6.6.0

Как мне получать значения из FormPanel с помощью ext-react 6.6.0?

Согласно Документация по API я должен использовать функцию getValues, которая работает в 6.5.1, но я получаю ошибку _this.form.getValues is not a function в 6.6.0

Код

Работает в 6.5.1: https://fiddle.sencha.com/?extreact#view/editor&fiddle/2n05

Сбой в 6.6.0 (информацию об ошибке см. В консоли): https://fiddle.sencha.com/?extreact#view/editor&fiddle/2n04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
182
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I get error _this.form.getValues is not a function in 6.6.0

Причина ref = {form => this.form = form}. В extreact-6.6.0 переменная формы не совсем formpanel. Итак, для этого вам нужно получить доступ вот так

ref = {form => this.form = (this.form || form.cmp)}}

Другой способ использовать button.up ('панель формы') для получения компонента formpanel. Эта кнопка является первым параметром вашего handler.

button.up('formpanel').getValues()

Вы можете проверить здесь рабочий рабочий пример.

Фрагмент кода

import React, { Component } from 'react';
import {launch} from '@sencha/ext-react';
import { ExtReact } from '@sencha/ext-react';
import { Container, Label, FormPanel, TextField, Button } from '@sencha/ext-modern';

class App extends Component {

    state = {
        values:JSON.stringify({
            fname: 'null',
            lname: 'null'
        })
    }

    submit = (btn) => {
        const values = btn.up('formpanel').getValues();

        console.info('Values using up selector',values);

        console.info('Values using up ref',this.form.getValues());

        this.setState({values:JSON.stringify(this.form.getValues())});
    }

    render() {
        return (
            <Container defaults = {{ margin: 10, shadow: true }}>
                <FormPanel title = "Form" ref = {form => this.form = (this.form || form.cmp)}>
                    <TextField name = "fname" label = "First Name"/>
                    <TextField name = "lname" label = "Last Name"/>
                    <Button handler = {this.submit} text = "Submit"/>
                </FormPanel>

                <Label padding = {'10'} html = {this.state.values} />
            </Container>
        )
    }
}

launch(<ExtReact><App /></ExtReact>);

Другие вопросы по теме