Как получить доступ к значениям из React Select и передать их значениям Formik при отправке? - PullRequest
Новая
       13

Как получить доступ к значениям из React Select и передать их значениям Formik при отправке?

0 голосов
/ 08 февраля 2019

Я хочу получить доступ к своему значению элементов React-Select и передать его как значения в функции OnSubmit и добавить к значениям, собранным из formik.

У меня есть многоэлементная форма, созданная в Formik.Я получаю доступ к этой форме внутри Модал.В форме я получаю доступ к значениям элементов формы username, email, password просто отлично.Code Below: 

  handleSubmit = (values,) => {
    const { onSuccess } = this.props;
    console.log(values);
    onSuccess(values);
  };

У меня также есть компонент React-Select, который загружает некоторые данные с парой label и value.

Я хочу добавитьвыбранное значение в список значений из фомрик.Ответ, приведенный ниже, дает мне только эту информацию. 

  selectOnChangeCallback = response => {
    // eslint-disable-next-line no-console
    console.log('selectOnChangeCallback', response);
  };

И мой React выберите Компонент: 

                  <ReactSelect
                    isMulti={false}
                    options={selectData}
                    onChangeCallback={this.selectOnChangeCallback}
                  />

Я обращаюсь к нему внутри Модального с помощью этой функции: 

  closeCreateUserModal = response => {
    this.setState({ isCreateUserModalOpen: false });
    // eslint-disable-next-line
    this.props.notify({
      message: `User ${response.username} was added to group `,
      status: STATUS.success,
    });

    console.log(response)

    return this.sampleGet();
  };

Мой компонент формы: 

const UserValidationSchema = Yup.object().shape({
  username: Yup.string('Provide a Username').required('Username is Required'),
  email: Yup.string().email('Provide a Valid email Address'),
  password: Yup.string('Provide a Password').required('Password s required'),
  confirmPassword: Yup.string('Provide your password again')
    .required('Password Confirmation is Required')
    .oneOf([Yup.ref('password')], 'Passwords do not match')
});

const INITAIL_VALUES = {
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  group: {}
};

class ViewUser extends Component {
  static propTypes = {
    ...formPropTypes,
    username: PropTypes.string,
    email: PropTypes.string,
    password: PropTypes.string,
    confirmPassword: PropTypes.string,
    groupSelect: PropTypes.func,
    onSuccess: PropTypes.func
  };

  static defaultProps = {
    email: ''
  };

  state = {
    type: 'password',
    groups: []
  };

  componentDidMount() {
    this.fetchListGroups();
  }

  fetchListGroups = () => {
    listGroups().then(({ data }) => {
      this.setState({ groups: data });
    });
  };

  mapListGroupToSelect = () => {
    const { groups } = this.state;
    return groups.map(group => ({
      label: group.name,
      value: group.name
    }));
  };

  selectOnChangeCallback = response => {
    // eslint-disable-next-line no-console
    console.log('selectOnChangeCallback', response);
  };

  handleSubmit = (values,) => {
    const { onSuccess } = this.props;
    // same shape as initial values
    console.log(values);
    onSuccess(values);
  };

  render() {
    const { type, groups } = this.state;
    const selectData = this.mapListGroupToSelect();
    const togglePassword = type === 'password' ? 'fa fa-eye fa-lg' : 'fa fa-eye-slash fa-lg';
    const classes = `${togglePassword}`;
    return (
      <Fragment>
        <Formik
          initialValues={INITAIL_VALUES}
          validationSchema={UserValidationSchema}
          onSubmit={this.handleSubmit}
        >
          {({ errors, touched }) => (
            <Form>
              <div className="col-7">
                <div className="my-3">
                  <label>
                    <span className="font-weight-bold">Username</span>
                    <span className="text-danger">*</span>
                  </label>
                  <Field name="username" type="text" className="form-control rounded-0" />
                  {errors.username && touched.username ? (
                    <div className="text-danger">{errors.username}</div>
                  ) : null}
                </div>
                <div className="my-3">
                  <label>
                    <span className="font-weight-bold">Email</span>
                  </label>
                  <Field name="email" type="email" className="form-control rounded-0" />
                  {errors.email && touched.email ? (
                    <div className="text-danger">{errors.email}</div>
                  ) : null}
                </div>
                <div className="my-3">
                  <label>
                    <span className="font-weight-bold">Password</span>
                    <span className="text-danger">*</span>
                  </label>
                  <div className="d-flex align-items-center">
                    <Field type={type} name="password" className="form-control rounded-0 mr-2" />
                    <span className={classes} onClick={this.togglePasswordMask} />
                  </div>
                  {errors.password && touched.password ? (
                    <div className="text-danger">{errors.password}</div>
                  ) : null}
                </div>
                <div className="my-3">
                  <label>
                    <span className="font-weight-bold">Confirm Password</span>
                    <span className="text-danger">*</span>
                  </label>
                  <Field name="confirmPassword" type={type} className="form-control rounded-0" />
                  {errors.confirmPassword && touched.confirmPassword ? (
                    <div className="text-danger">{errors.confirmPassword}</div>
                  ) : null}
                </div>
                <div className="my-3">
                  <label>
                    <span className="font-weight-bold">Select Group</span>
                    <span className="text-danger">*</span>
                  </label>
                  <ReactSelect
                    isMulti={false}
                    options={selectData}
                    onChangeCallback={this.selectOnChangeCallback}
                  />
                </div>
              </div>
              <button type="submit" className="btn btn-primary rounded-0 float-right mt-5 b-2">
                <span className="mx-2">Create User</span>
              </button>
            </Form>
          )}
        </Formik>
      </Fragment>
    );
  }
}

export default ViewUser;

В настоящее время я могу получить доступ только к значениям из FORMIK, но я хочу добавить информацию о реагировании выбора к значениям, чтобы я мог отобразить хорошее сообщение ссоответствующую информацию каждый раз, когда я создаю пользователя.

1 Ответ

0 голосов
/ 08 февраля 2019

Я пытаюсь что-то вроде: 

<Field 
  component={({field, form}) =>
    <ReactSelect
      isMulti={false}
      options={selectData}
      value={selectData ? selectData.find(option => option.value === field.value) : ''}
      onChange{(option) => form.setFieldValue(field.name, option.value)}
      onBlur={field.onBlur}
    />} 
/>

Не проверял (и должны быть более чистые способы сделать это - если это работает)

Я бы обновил ответ, как только яв любом случае достаточно времени для тестирования

...