Реагировать на значения формы, не отображаемые при отправке формы - PullRequest
Новая
       6

Реагировать на значения формы, не отображаемые при отправке формы

0 голосов
/ 28 февраля 2020

Допустим, у меня есть некоторые свойства, которые могут быть равны некоторым возможным вариантам. Я определю их оба в someConstants. js

const possibleOptions = [
    {key: '1', text: "some text 1", value: "some_text_1"},
    {key: '2', text:  "some text 2", value:  "some_text_2"},
];

const someProperties = {
    flags: []
};


export { someProperties, possibleOptions };

Я хочу, чтобы someProperties.flags был обновлен на possibleOptions при отправке формы someForm. js

import React from "react";
import { someProperties, possibleOptions } from "./someConstants";
import { Form } from "semantic-ui-react";
import "./styles.css";

class SomeForm extends React.Component {
    state = someProperties;

    handleSubmit = event => {
        event.preventDefault();
        this.props.onSubmit(this.state);
    };

    onChange = event => {
        const {
            target: { name, value }
        } = event;

        this.setState({
            [name]: value
        });
    };

    render() {
        return (
            <Form onSubmit={this.handleSubmit} onChange={this.onChange}>
                <Form.Dropdown
                    label="Flags"
                    placeholder="Flags"
                    name="flags"
                    fluid
                    multiple
                    search
                    selection
                    options={possibleOptions}
                />

                <Form.Button type="submit">Submit</Form.Button>
            </Form>
        );
    }
}

export { SomeForm };

Эти значения будут отображаться с помощью showFlags. js

import React from "react";
import "./styles.css";

class ShowFlags extends React.Component {
    displayList = list => {
        return(
            <ol>
                {list.map(flag => (
                    <li key={flag}>{flag}</li>
                ))}
            </ol>
        );
    }

    render() {
        return (
            <div>
                {this.props.flagProps.flags}
            </div>
        );
    }
}

export { ShowFlags };

Взаимодействие этих классов может быть показано далее в index. js

import React from "react";
import ReactDOM from "react-dom";
import { SomeForm } from "./someForm";
import { ShowFlags } from "./showFlags";

class App extends React.Component {
    state = {
        flagProps: {},
        submitted: false
    };

    handleSubmit = fields => {
        this.setState({
            flagProps: { ...fields },
            submitted: true
        });
        console.log("handleSubmit flagProps:" + this.state.flagProps);
    };

    render() {
        return (
            <>
                <div className="Section">
                    <div className="Title">flagProps form</div>
                    <SomeForm flagProps={this.state.flagProps} onSubmit={this.handleSubmit} />
                </div>
                <div className="Section">
                    <div className="Title">The result</div>
                    {this.state.submitted ? (
                        <ShowFlags flagProps={this.state.flagProps} />
                    ) : (
                        <div>Appears on submission.</div>
                    )}
                </div>
            </>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

Как этого добиться? Подводя итог:

Текущее поведение Я могу выбрать параметры, но отправка формы не приводит к отображению. ShowFlags.render() ничего не показывает.

Желаемое поведение Я могу выбрать опции, и эти опции отображаются ShowFlags.render() при отправке формы.

Если это имеет значение, это использует semanti c -ui.

1 Ответ

2 голосов
/ 28 апреля 2020

Вот ваш фиксированный код: 

  onChange = (event, data) => {
    this.setState({
      [data.name]: data.value
    });
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Dropdown
          label="Flags"
          placeholder="Flags"
          name="flags"
          fluid
          multiple
          search
          selection
          options={possibleOptions}
          value={this.state.flags}
          onChange={this.onChange}
        />

        <Form.Button type="submit">Submit</Form.Button>
      </Form>
    );
  }

https://codesandbox.io/s/exciting-kare-31l7w?file= / src / SomeForm.jsx

Вы забыли применить обработчик onChange к Form.Dropdown в SomeForm, хотя semanti c -ui-реагирование работает так, что обработчикам изменений передаются реквизиты в качестве второго аргумента функции изменения. Тогда новое значение будет data.value.

Вы также должны установить значение Form.Dropdown равным value={this.state.flags}, так что это полностью контролируемый компонент, поскольку вы все равно переводите его в состояние.

Я также удалил обработчик onChange формы, так как это никак не влияет на выпадающий список. Semanti c UI React (SUI) не указал его в реквизитах своей формы.

Наличие в форме обработчика onChange является свойством html, а не пропуском SUI. Что объясняет, почему это не работает для Dropdowns. Так как они не имеют нормального ввода / выбора html элементная база. Это также будет означать, что обычный аргумент данных SUI для обработчиков onChange не будет существовать, поэтому вам нужно получить атрибуты непосредственно от элемента.

Вся форма onChange имеет пример обработчика формы onChange, который выглядит очень мощным для всего, что имеет базовый элемент, который обычно идет в форме.

Base html элементы: input, select и textarea.

...