Данные из одного JSON файла перезаписывают другой набор данных JSON при попытке использовать модульact-select в форме в React - PullRequest
Новая
       19

Данные из одного JSON файла перезаписывают другой набор данных JSON при попытке использовать модульact-select в форме в React

0 голосов
/ 10 января 2020

Доброе утро, я создал новый модуль узла, продублировав найденный здесь response-select-country-list, https://www.npmjs.com/package/react-select-country-list и изменив файлы для отображения штатов США вместо стран.

С новым модулем все в порядке, за исключением случаев, когда я go его реализую.

Я пытаюсь создать страницу контактов, где пользователи могут вводить адрес контакта с указанием штата США (не требуется) и страны. .

Когда я это делаю, данные "страны" перезаписываются данными "государства", и я не знаю, как провести различие между модулем стран и модулем состояний США в моем файле jsx.

В раскрывающихся списках стран и штатов показаны штаты США, желаемое поведение - показать страны для раскрывающегося списка "страна" и штаты США для раскрывающегося списка "штат".

Не думаю, что будет какая-либо разница между выпадением страны и выпадением состояния, потому что я ничего не сделал, чтобы провести различие между этими двумя, потому что я не знаю, как. Как мне объяснить, как я могу отличить два модуля в моем файле JSX? Или, если есть другой / лучший способ сделать это, пожалуйста, дайте мне знать. Я новичок в 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;

1 Ответ

2 голосов
/ 10 января 2020

Вы можете решить свою проблему, переименовав this.options в this.countryOptions для стран и this.usStateOptions для штатов США. В this.state удалите свойство options и используйте this.countryOptions и this.usStateOptions для раскрывающихся списков. Надеюсь, это поможет.

Ваш класс должен выглядеть так: 

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>
      </>
    );
  }
}
...