Получение значений из FormPanel в ExtReact 6.6.0 - PullRequest
Новая
       26

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

0 голосов
/ 25 октября 2018

Как мне получать значения из FormPanel с помощью ext-реагировать 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

1 Ответ

0 голосов
/ 25 октября 2018

Я получаю ошибку _this.form.getValues ​​не является функцией в 6.6.0

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

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

Другой способ, которым вы используете button.up ('formpanel') , чтобы получить компонент 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.log('Values using up selector',values);

        console.log('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>);
...