Question

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

由于某种原因，我没有使用字段输入值设置状态'name'。我不知道如何构建我认为是我的问题的连接部分。特别是，我不清楚如何编写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)
);

Answer 1

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

如果您要使用值初始化表单，则应使用mapStateToProps道具在initialValues中的状态进行设置，如下所示：

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

A great exemple here

我希望这可以帮到你

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

1 个答案: