Получить значение элементов управления вводом, которые были созданы динамически - PullRequest
Новая
       49

Получить значение элементов управления вводом, которые были созданы динамически

0 голосов
/ 05 марта 2020

В моем проекте React TypeScript я динамически создаю несколько элементов управления вводом, таких как TextField, DatePicker, Checkbox, ComboBox и т. Д. c ... в форме, подобной пользовательскому интерфейсу. При нажатии на кнопку «Отправить» я хочу получить значение каждого из элементов управления вводом. Какой эффективный способ сделать это? Я могу иметь событие onChange для каждого элемента управления, но мне было интересно, есть ли лучший способ сделать это.

1 Ответ

0 голосов
/ 06 марта 2020

Это не плохой способ сделать это. Вы, вероятно, должны хранить значения в локальном состоянии компонента (например, setState) или в хранилище Redux / Mobx / что угодно, если у вас есть это.

Как говорится, если у вас много элементов управления и вы этого не делаете Если вы хотите добавить отдельный обработчик для каждого из них, компоненты Fabri c имеют в основном похожие API для своих обработчиков onChange, поэтому вы можете иметь один обработчик и добавить идентификатор для элемента, чтобы его было проще хранить.

Что-то вроде: 

class MyForm extends React.Component<MyFormProps, MyFormState> {
    constructor(props: MyFormProps) {
        super(props);
        this.state = {
            formFields: {...defaultFormValues} // you can imagine having an object of default values
        };
    }

    private _onChangeHandler(ev: React.FormEvent<HTMLElement | HTMLInputElement>, newValue: any) => {
        const formFields = {...this.state.formFields};
        formFields[ev.target.dataset.id] = newValue;
        this.setState({formFields});
    }

    public render() {
        return (
            <form>
                <TextField data-id="formelem1" onChange={this._onChangeHandler} />
                <TextField data-id="formelem2" onChange={this._onChangeHandler} />
                <CheckBox data-id="checkbox1" onChange={this._onChangeHandler} />
            </form>
        );
    }
}

Обратите внимание, что единственным исключением является DatePicker, поскольку его обработчик onChange (onSelectDate) получает новую выбранную дату в качестве единственного параметра, но Вы можете легко добавить предложение if для обработки этого случая.

...