如何使用 redux-form 和 formValueSelector 检索输入表单值答案

【问题标题】：How to retrieve an input form value with redux-form and formValueSelector如何使用 redux-form 和 formValueSelector 检索输入表单值
【发布时间】：2017-12-12 23:26:34
【问题描述】：

我正在尝试检索单个输入值并将其记录下来。这是一个具有现有名称值道具的编辑表单。

出于某种原因，我没有使用字段输入的值设置状态“名称”。我不确定如何构建我认为是我的问题的连接部分。特别是，我不清楚如何编写 mapStateToProps 以包含我的非表单状态和表单状态。

部分缩小的代码：

import { Field, reduxForm, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';
import { updateStable } from '../../actions/index';

const selector = formValueSelector('myEditForm');

class EditStuff extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name
    };
  }

  componentDidMount() {
    this.props.initialize({
      name: this.props.name || ''
    });
  }

  componentDidUpdate() {
    // this.state.name is not getting set from input value
    this.props.updateLocalActiveStuffData(this.state.name);

  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>

          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Field
              label="Name"
              name="name"
              class="name"
              type="text"
              component={renderField}
            />

            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    displayEditForm: state.displayEditForm,  //my own non-form related state
    name: selector(state, 'name') //form input 'name'
  };
}

export default connect(mapStateToProps, { updateStuff })(
  reduxForm({
    form: 'myEditForm'
  })(EditStuff)
);

【问题讨论】：

标签： react-redux redux-form

【解决方案1】：

我认为如果您无法检索该值，那是因为您在 reduxForm 中的表单名称和 formValueSelector 名称不同'StableEditForm' != 'myEditForm'
You have more info on selectors here

如果你想用值初始化你的表单，你应该使用initialValues 属性从mapStateToProps 中的状态设置它，如下所示：

function mapStateToProps(state) {
  return {
    initialValues: state.displayEditForm, // value of your form
 };
}

A great exemple here

希望对你有帮助

【讨论】：

表单名称差异是复制/粘贴错字 - 我编辑了问题。我会看看你推荐的设置 initialValues 的方法。