尝试在 React 中的表单中使用 react-select 模块时，来自一个 JSON 文件的数据正在覆盖另一个 JSON 数据集

Question

早上好，我通过复制此处找到的 react-select-country-list https://www.npmjs.com/package/react-select-country-list 并修改文件以显示美国各州而不是国家/地区，创建了一个新的节点模块。

新模块一切正常，除了我去实现它的时候。

我正在尝试建立一个联系人页面，用户可以在其中输入包含美国州（非必需）和国家/地区的联系人地址。

当我这样做时，"country" 数据被 "state" 数据覆盖，我不知道如何在我的 jsx 文件中区分国家模块和美国国家模块。

国家和州下拉列表都显示美国各州，期望的行为是在 "country" 下拉列表中显示国家，在 "state" 下拉列表中显示美国州。

我不认为国家下拉列表和州下拉列表之间有任何区别，因为我没有做任何事情来区分这两者，因为我不知道如何区分。

有人可以向我解释一下如何区分我的 jsx 文件中的两个模块吗？或者，如果有 another/better 方法可以做到这一点，请告诉我。我是 React 新手。

这是我的 jsx 组件代码：

import React from "react";
import Select from "react-select";
import countryList from "react-select-country-list";
import usstatesList from "react-select-usstates-list";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  FormGroup,
  Form,
  Row,
  Col
} from "reactstrap";

class AddNewContact extends React.Component {
  constructor(props) {
    super(props);

    this.options = countryList().getData();

    this.options = usstatesList().getData();

    this.state = {
      options: this.options,
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}

export default AddNewContact;

Answer 1

您可以通过将国家/地区的 this.options 重命名为 this.countryOptions 以及美国各州的 this.usStateOptions 来解决您的问题。在 this.state 中删除 options 属性并使用 this.countryOptions 和 this.usStateOptions 作为下拉菜单。我希望这有帮助。

您的 class 应如下所示：

class AddNewContact extends React.Component {
    constructor(props) {
    super(props);

    this.countryOptions = countryList().getData();

    this.usStateOptions = usstatesList().getData();

    this.state = {
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.usStateOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.countryOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}

尝试在 React 中的表单中使用 react-select 模块时，来自一个 JSON 文件的数据正在覆盖另一个 JSON 数据集

Data from one JSON file is overwriting another JSON dataset when trying to use react-select module in a form in React

select

reactjs

react-select

dropdown

reactstrap