Question

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

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，以便在我想要检索数据并显示它时可以引用它们。可以有人请指导我如何处理这两个问题？

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-form传递到redux中的后端api

1 个答案: