Question

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

}

最底线是如果我使用react-select库的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;

我正在使用react-select来选择redux形式的选择选项。后提交表单，我无法获取表单提交的值。我正在使用带有redux形式的react-select库https://react-select.com/creatable。

Answer 1

由于没有获取值，因此没有正确绑定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)
    }
}

希望对您有帮助！

在提交表单上，无法获得反应选择值

1 个答案: