React 表单值未在表单提交时显示

Question

假设我有一些属性可以等于一些可能的选项。我将在 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 在提交表格 someForm.js

后由 possibleOptions 更新

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() 显示。

如果重要的话，这是使用语义-ui。

Answer 1

这是您的固定代码：

  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 处理程序应用到 SomeForm 中的 Form.Dropdown，尽管 semantic-ui-react 的工作方式是更改处理程序具有props 作为 change 函数的第二个参数传递给他们。那么新值将是 data.value.

您还应该将 Form.Dropdown 的值设置为 value={this.state.flags}，这样它就是一个完全受控的组件，因为您无论如何都要将其置于状态。

我还删除了表单的 onChange 处理程序，因为它根本不影响下拉列表。 Semantic UI React (SUI) 没有在他们的 Form 的 Props 中列出。

在表单上有一个 onChange 处理程序是 html 属性而不是 SUI 道具。这可以解释为什么它不适用于下拉菜单。因为它们没有正常的 input/select html 元素基础。这也意味着普通 SUI 的 onChange 处理程序的数据参数将不存在，因此您需要直接从元素中获取属性。

Entire form onChange 有一个表单 onChange 处理程序的示例，对于任何具有通常出现在表单中的基本元素的东西来说，它看起来非常强大。

基本 html 元素为：输入、select 和文本区域。

React 表单值未在表单提交时显示

React form values not being displayed on form submission

reactjs

semantic-ui