向 React 表单添加多个 field.ids？

Question

这是我在 Stack Overflow 上的第一个问题。我正在尝试制作一个 React 表单，当您 select 一个国家时，它会提供不同的字段来填写然后提交。

到目前为止，当我将 select 巴西作为我的国家/地区时，我只能在我的表单中使用一个 field.id。我该怎么做才能让我有多个字段来填写？

我刚开始学习 React，这是为了一个项目。任何帮助是极大的赞赏！谢谢！

我的应用程序 link 包含所有代码：https://codesandbox.io/s/react-form-example-forked-7fkgz?file=/src/Form.js

到目前为止，这是我的代码（我的 Form.js 代码）：

import React, { Component } from "react";
import Field from "../src/Field";
import styles from "../src/styles.css";

const fields = [];

export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: [
        {
          id: "first-name",
          className: "label",
          name: "first_name",
          label: "First Name",
          type: "text",
          defaultValue: "",
          isShowing: false
        },
        {
          id: "martial-status",
          name: "martial_status",
          label: "Martial Status",
          type: "text",
          defaultValue: "",
          isShowing: false
        },
        {
          id: "country",
          name: "country",
          label: "Country",
          type: "select",
          defaultValue: "Canada",
          options: [
            {
              className: "label",
              value: "Canada",
              label: "Canada"
            },

            {
              className: "label",
              value: "Brazil",
              label: "Brazil"
            }
          ],
          isShowing: true
        }
      ]
    };
    this.handleFieldsChange = this.handleFieldsChange.bind(this);
  }
  handleFieldsChange(name, value) {
    if (name === "country" && value === "Brazil") {
      this.setState({
        fields: this.state.fields.map((field) =>
          field.id === "first-name" ? { ...field, isShowing: true } : field
        )
      });
    }
  }

  render() {
    console.log(this.state.fields);
    return (
      <div className="pkg-settings">
        <form method="post">
          <table className="form-table">
            <tbody>
              {this.state.fields.map((fields) => (
                <Field
                  key={fields.id}
                  attr={fields}
                  handleFieldsChange={this.handleFieldsChange}
                />
              ))}
            </tbody>
          </table>

          <p className="submit">
            <input
              type="submit"
              name="submit"
              id="submit"
              className="buttonbutton-primarybutton-large"
              value="Submit"
            />
          </p>
        </form>
      </div>
    );
  }
}

Answer 1

很高兴看到你学习，干得好，你所拥有的正在发挥作用！您目前正在更改时过滤您的字段。 handleFieldsChange 函数是您必须了解自己在做什么的地方；首先，我会重命名它，因为只有一个字段组件正在处理，那么你现在必须考虑的是当用户 select 国家/地区时你想做什么，只需尝试输入这样的内容，然后你将能够从状态中看到更多字段以查看我告诉你的内容：

handleFieldChange(name, value) {
if (name === "country" && value === "Brazil") {
  this.setState({
    fields: this.state.fields.map((field) =>
      { ...field, isShowing: true }
    )
  });
}

}

向 React 表单添加多个 field.ids？

Adding multiple field.ids to a React form?

reactjs

react-forms