如何在 redux 中将 select 下拉列表的数据从 redux-form 传递到后端 api

Question

我有一个 redux 表单，其中有 2 个输入字段和一个 select 下拉列表。我想将输入值存储到后端 api。我能够从输入中获取值并将其传递给服务器，但由于某种原因我无法正确获取 select 下拉值并将其传递给后端服务器。我知道我在状态上犯了一些愚蠢的错误，但我无法弄清楚什么是 that.My 文件，如下所示：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createPosts } from '../actions/posts_action';

class CreatePost extends Component {
  constructor() {
    super();
    this.state = {
      selectValue : 'react'
  };
  this.handleChange = this.handleChange.bind(this);
  this.renderCategory = this.renderCategory.bind(this);
}

  renderField(field) {
      return(
        <div className="title-design">
            <label className="label-design"> {field.label} </label>
            <input
              type="text"
              className="title-input"
              {...field.input}
            />
            <div className="text-help  has-danger">
              {field.meta.touched ? field.meta.error : ''}
            </div>
      </div>
      );
  }

  handleChange(e) {
    this.setState({selectValue: e.target.value});
    console.log(this.state.selectValue);
  }

  renderCategory(field) {
    return(
      <div className="title-design">
        <label className="label-design">{field.label} </label>

        <select
          name="categories"
          className="title-input"
          value={this.state.selectValue}
          onChange={this.handleChange}  >
              <option value="react">React</option>
              <option value="redux">Redux</option>
              <option value="udacity">Udacity</option>
        </select>
        {this.state.selectValue}
      </div>
    );
  }

    onSubmit(values) {
      this.props.createPosts(values, () => {
          this.props.history.push('/');
      });
    }

    render() {
      const { handleSubmit } = this.props;

      return (
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label="Title for Post"
            name="title"
            component={this.renderField}
          />

          <Field
            label="Post Content"
            name="body"
            component={this.renderField}
          />

          <Field
            label="Category"
            name="category"
            component={this.renderCategory}
          />

          <button type="submit" className="btn btn-primary">Submit</button>
          <Link  to="/">
            <button className="cancel-button">Cancel</button>
          </Link>
        </form>
      );
    }
}

function validate(values) {
  const errors = {} ;

  if (!values.title) {
      errors.title = "Enter a title";
  }

  if (!values.body) {
    errors.body = "Enter some content";
    }

  return errors;
}

export default reduxForm({
  validate : validate,          //validate
  form : 'CreatePostForm'
})(
  connect(null,{ createPosts })(CreatePost)
);

注意：此外，我想为传递到服务器的每条记录生成一个唯一的 ID，以便在我想检索数据时可以参考它们并显示 it.Can 谁能指导我如何处理这两个问题？

Answer 1

setState 不是同步的，它有一个回调，所以你应该有这样的东西：

handleChange(e) {
    this.setState({selectValue: e.target.value}, () => {
       console.log(this.state.selectValue);
   });
}

要设置字段的值，可以使用change，其签名是：

change(field:String, value:any)

因此您的处理程序将变为：

handleChange(e) {
    const value = e.target.value;
    this.props.change("categories", value);
    this.setState({ "selectValue": value }, () => {
      console.log(value);
    });    
}

并且在您的 renderCategory 中您可以删除值属性：

... 
<select
    name="categories"
    className="title-input"
    onChange={this.handleChange} >
...

要为每次提交设置一些随机id，你可以找到很多库来生成一个随机id；分配给记录，再次使用 change 方法和字段 "id" 将被发送到服务器：

this.props.change('id', <random generated Id>)

看到这个sandbox粗略的实现

如何在 redux 中将 select 下拉列表的数据从 redux-form 传递到后端 api

How to pass select dropdown's data from redux-form to backend api in redux

javascript

reactjs

redux

redux-form