1

我使用了这个包装类，因为我使用的是 Formik 和 FieldArray

import React, { Component } from "react";
import { ReactDOM } from "react-dom";
import Select from "react-select";
import { observer } from "mobx-react";
import { axiosInstance } from "../stores/AxiosInstance";

@observer
export default class CountryStateSelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { stateOptions: [] };
  }
  handleCountryChange = value => {
    const that = this;

    axiosInstance
      .get(`/States?countryId=${value.value}`)
      .then(function(response) {
        that.props.onChange(that.props.countryName, value);
        that.props.onChange(that.props.stateName, null);

        const states = response.data.map(state => {
          return { label: state.name, value: state.id };
        });
        // if I move out state select code then won't need to update state here but don't know how to call something like updateState(record)
        that.setState({
          stateOptions: states
        });
      });
  };
  handleStateChange = value => {
    console.log(this.props.stateName, value)
    this.props.onChange(this.props.stateName, value);
  };
  handleCountryBlur = () => {
    this.props.onBlur(this.props.countryName, true);
  };
  handleStateBlur = () => {
    this.props.onChange(this.props.stateName, true);
  };
  render() {
    const props = this.props;
    return (
      <React.Fragment>
        <div className="field">
          <label className="label">Country</label>
          <div className="control">
            <Select
              options={props.options}
              isMulti={props.isMulti}
              onChange={this.handleCountryChange}
              onBlur={this.handleCountryBlur}
              closeMenuOnSelect={props.closeMenuOnSelect}
            />
            {this.props.CountryError}
          </div>
        </div>

        <div className="field">
          <label className="label">State/Province</label>
          <div className="control">
            <Select
              options={this.state.stateOptions}     
              onChange={this.handleStateChange}
              onBlur={this.handleStateBlur}
            />
            {this.props.StateError}
          </div>
        </div>
      </React.Fragment>
    );
  }
}

但是我发现，当状态被选中时，该值不会存储在 Formik 中（它存储为未定义，有时为真）。

所以现在我在想也许将 State Zip 移出并使其成为自己的包装器或其他东西，但我不知道如何获取返回的“状态”并填充正确的状态框，因为它们可以生成很多。

@inject("AccountSetupStore")
@observer
export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { records:  [this.generateRecord(1, true, true)] };
  }
  componentDidMount() {
    const accountSetupStore = this.props.AccountSetupStore;
    accountSetupStore.getCountries();
  }
  updateState(record) {
      // would like to call this method that can somehow update the record
      // propblem is I don't seem to have access to props when this function is being called from the CountryStateSelectComponent
  }
  render() {
    const props = this.props;
    const accountSetupStore = props.AccountSetupStore;

    const countries = [];
    for (const country of accountSetupStore.countries) {
      countries.push({ value: country.id, label: country.name });
    }


    return (
      <section className="accordions">
        <Formik
          initialValues={{
            records: this.state.records
          }}
          onSubmit={(
            values,
            { setSubmitting, setErrors}
          ) => {

            console.log(values,"values");
          }}
          validationSchema={Yup.object().shape({
            branches: Yup.array()
              .of(
                Yup.object().shape({
                })
              )
          })}
          render={({
            values,
            setFieldValue,
            setFieldTouched,
          }) => (
            <FieldArray
              name="records"
              render={arrayHelpers => (
                <Form>
                  {values.records.map((record, index) => {
                     return (<article}>
                       <CountryStateSelectComponent options={countries} 
                                onChange={setFieldValue}
                                countryName={`records[${index}].selectedCountry`}
                                stateName={`records[0].selectedState`}
                                onBlur={setFieldTouched}
                                isMulti={false}
                                index = {index}
                                closeMenuOnSelect={true}
                                CountryError = {<ErrorMessage name={`records[${index}].selectedCountry`}/>}
                                StateError= {<ErrorMessage name={`records[${index}].selectedState`}/>}
                            />
                   </article>)
                  })}
                </Form>
              )}
            />
          )}
        />
      </section>
    );
  }
}
4

1 回答 1

1

React Select onChange 将值发送到提供的方法

const onStateChange = (selectedOption, {action}) => {
  //do something with the selectedOption according to the action
}

<Select onChange={onStateChange} />

请参阅Props 文档中的 onChange文档。

于 2018-10-12T15:32:22.773 回答