react-select 仅包含表单中的值，而不是 value: '' 和 label: ''答案

【问题标题】：react-select to just include values in form, rather than value: '' and label: ''react-select 仅包含表单中的值，而不是 value: '' 和 label: ''
【发布时间】：2018-04-13 13:39:38
【问题描述】：

我将react-select 包含在我的rails 项目中，在redux-form 中，一切正常，除了我提交表单的后端不喜欢{value, label}，

我希望我的表单字段只包含一个值列表。

这是我的表单代码：

export const renderTagsSelect = props => {
  const { input, initialValues } = props;
  return (
    <Creatable
      {...props}
      value={input.value || initialValues}
      resetValue={initialValues}
      onChange={value => input.onChange(value)}
      onBlur={() => input.onBlur(input.value)}
    />
  );
};

render() {
  <form onSubmit={handleSubmit(doSaveItem)}>
    <Title>Modifica Item</Title>
    <Field
      name="title"
      label="Titolo"
      component={renderInput}
      validate={required()}
    />
    <br />
    <span>Tags</span>
    <br />
    <TagsFormSelector name="tag_list" tags={item.tag_list} />
    <SubmitButton type="submit" disabled={pristine || submitting}>
      Salva modifiche
    </SubmitButton>
  </form>
}

提交时，表单生成的JSON是这样的：

 "tag_list": [
    {
      "label": "cena",
      "value": "cena"
    },
    {
      "label": "Paesaggi cittadini",
      "value": "Paesaggi cittadini"
    }
  ],

我的后端是用acts_as_taggable_on 在rails 中实现的，更喜欢接收这样的东西：

"tag_list: ["cena", "Paesaggi cittadini"]

对于未优化的这可能是，我更喜欢让后端驱动 API。

任何线索如何实现这一目标？

【问题讨论】：

标签： reactjs redux-form acts-as-taggable-on react-select

【解决方案1】：

您只需将函数引用传递给onSubmit 属性，您可以在调用handleSubmit 之前创建一个格式化数据的新函数：

  <form onSubmit={this.onSubmit}>

在你的onSubmit 函数中：

onSubmit = (tags) => {
  const { handleSubmit } = this.props;
  const submitValues = tags.map((tag) => tag.value);

  handleSubmit(submitValues); // you can also pass doSaveItem here
}

【讨论】：

【解决方案2】：

按照 kuiro5 的建议，我使用 normaliseData 函数将其修复为表单：

在form：

     <form onSubmit={handleSubmit(doSaveItem)}>
        [..]
        <TagsFormSelector name="js_tag_list" tags={item.tag_list} />
        [..]

在doSaveItem：

const doSaveItem = (data, dispatch, props) => {
  normaliseData(data);

  return dispatch(saveItem(props.item.id, data)).catch(response => {
    throw new SubmissionError(f.errorsFromProps(response));
  });
};

normaliseData：

const normaliseData = data => {
  data["js_tag_list"] &&
    (data["tag_list"] = data["js_tag_list"].map(tag => tag.value));

和其他数据规范化。

这使它工作。

【讨论】：