Как мне получать значения из 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
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>);