Question

我正在使用react / redux和redux-form，由于某种原因输入值没有显示在我的编辑表单上。

我console.log我的帖子，它显示它们在那里，但由于某种原因它不起作用。我将在下面发布代码。

编辑组件：

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

class EditPost extends Component {
  componentDidMount() {
    const {id} = this.props.match.params;
    this.props.getOnePost(id);
  }

  renderField(field) {
    const { meta: {touched, error} } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;

    return (
      <div className={className}>
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type={field.type}
          value={field.value}
          {...field.input}
        />
        <div className="text-help">
          { touched ? error : ''}
        </div>
      </div>
    )
  }

  onSubmit(values) {
    const {id} = this.props.match.params;

    this.props.updatePost(values, id, () => {
      this.props.history.push(`/posts/${id}`);
    });
  }

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

    const {post} = this.props;

    if(!post) {
      return <div> Loading... </div>;
    }
    console.log(post);

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <Field
          label="Title"
          name="title"
          type="text"
          value={post.title}
          component={this.renderField}
        />
        <Field
          label="Content"
          name="content"
          type="text"
          value={post.content}
          component={this.renderField}
        />
        <button type="submit" className="btn btn-success">Submit</button>
        <Link to={`/posts/${post._id}`} className="btn btn-danger">Cancel</Link>
      </form>
    );
  }
}

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

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

  return errors;
}

function mapStateToProps({ posts }, ownProps) {
  return { post: posts[ownProps.match.params.id] };
}

export default reduxForm({
  validate,
  form: 'editform'
})(connect(mapStateToProps, actions)(EditPost));

Answer 1

不是直接设置值，而是传递initialValues道具：

function mapStateToProps({ posts }, ownProps) {
  const post = posts[ownProps.match.params.id]
  return { 
    post,
    initialValues: {
      ...post
    }
  };
}

从表单中的value删除Field道具。只要Post对象上的属性与要填充的字段的名称相同，就可以使用对象扩展。如果它们不同，您必须适当地映射它们

initialValues: {
  contentField: post.content
}

<Field name="contentField" />

在使用reduxForm增强器之前，

初始值必须设置为。另外，因为我知道它会出现（并且相信我，最终会出现），如果您希望在模型更新时更新您的表单值，那么您将添加enableReinitialize: true reduxForm的配置

React / redux输入值未显示

1 个答案: