в форме отправки не удалось получить значения реакции-выбора - PullRequest
Новая
       14

в форме отправки не удалось получить значения реакции-выбора

0 голосов
/ 23 декабря 2018 
onSubmit(values) {
   console.log("i m clicked", values);  /// i didn't get form values 
    here. 
}

renderMacros() {
const { handleSubmit } = this.props;
const macrosData = this.props.macros.macros;
const categoryMacrosData = this.props.categoryMacros.category;
console.log("categoryMacrosData", categoryMacrosData);
const { open } = this.state;
if (macrosData) {
  return (
    <div>
      <div className="form-block-5 w-form">
        <form
          id="macros-form"
          name="macros-form"
          onSubmit={handleSubmit(this.onSubmit)}
        >
          <div className="row">
            <div className="col-sm-12">
              <label>Type</label>
              <Field   // this works fine
                name="category"
                options={MACRO_TYPE_CATEGORIES}
                placeholder="Type"
                component={SelectInput}
                set_default="true"
              />
            </div>
            <div className="col-sm-12">
              <Field     // this works fine
                name="name"
                placeholder="Name Ex. Follow-up template"
                component={renderField}
                type="text"
                className="text-fields w-input"
                id="macros_name"
              />
            </div>
            <div className="col-sm-12">
              <Field    // here is the problem
                type="text"
                name="categoryId"
                options={categoryMacrosData}
                placeholder="Search or add category "
                component={AsyncMulti}
                handleSelect={this.handleSelectChange}
              />
            </div>                
          </div>
          <button>Create Macro</button>
        </form>
      </div>
    </div>
  );
}

}

Суть в том, что если я использую Creatable компонент библиотеки реагировать на выбор, я не могу получить выбранные значения.

Файл моего компонента: components/Multi.js 
 import React from "react";
 import CreatableSelect from "react-select/lib/Creatable";

 const MultiSelect = props => {
 const { options, handleSelect } = props;
 return <CreatableSelect isMulti onChange={handleSelect} options= 
  {options} />;
 };

 export default MultiSelect;

Я использую реагировать на выбор для выбора опций в избыточной форме.После отправки формы я не могу получить отправленные значения.Я использую реагирующую библиотеку https://react -select.com / creatable с редукционной формой.

1 Ответ

0 голосов
/ 23 декабря 2018

Вы не связываете handleSubmit должным образом, а также не используете refs, так как вы не получаете значения.

Я предлагаю вам попробовать ввести код привязки в теге <form>: 

<form
  id="macros-form"
  name="macros-form"
  onSubmit={this.handleSubmit.bind(this)}
>

Также передайте refs в свой тег поля, чтобы получить значение: 

<Field
  name="categoryId"
  options={categoryMacrosData}
  placeholder="Search or add category "
  component={Multi}
  handleSelect={this.handleSelectChange}
  ref="categoryId"                      
 />

Вместо записи onSubmit функция: 

onSubmit(values) {
   console.log("i m clicked", values);  /// i didn't get form values 
    here. 
}

Замените его накод этой функции: 

handleSubmit(event) {
   if (this.refs.categoryId !== '') {
      event.preventDefault();
      console.log('categoryId: ', this.refs.categoryId.value)
    }
}

Надеюсь, это поможет вам!

...