Redux-Form，如何将 formValueSelector 与动态字段名称一起使用？

Question

我正在使用 redux 表单并尝试创建一个 Field 组件，如下所示：

<Rating
  stop={10}
  initialRate={selector(this.props.state, 'age')}
  onRate={(rate) => this.onRateChange(rate)}
  onChange={(value) => { this.changeRate("name", value) } }
/>
<span className="label label-default" id="label-onrate">{this.state.label}</span>

<Field
  name="age"
  type="number"
  component={renderField2}
/>

RateForm = reduxForm({
  form: 'rateForm'
})(RateForm);

const selector = formValueSelector('rateForm');

const mapStateToProps = state => {
  return {
  };
};

export default connect(mapStateToProps)(RateForm);

我遇到的问题是 initialRate 不工作...以下未返回值：

selector(this.props.state, 'age')

因为字段名会是动态的，我需要避免：

在 mapStateToProps 中定义具体的字段名称。

我在使用 redux-form formValueSelector 不为 initialRate 提供值时做错了什么？

Answer 1

来自文档：

The function returned from formValueSelector() has the following structure:

selector(state:Object, ...field:String)
 state : Object [required]
The global Redux state given to mapStateToProps.
 ...field : String [required]
The field, or fields, you want to select. If you provide only one field name, the function will return the value of that field. If you provide more than one field name, it will return an object mapping fields to values. If your field are "deep" (i.e. has one or more . in the name), the structure you get back will also be deep. e.g. If your fields are 'a.b' and 'a.c', the resulting structure will be { a: { b:'bValue', c: 'cValue' } }.

在你的情况下，你没有从 mapStateToProps 返回任何东西，

您可以不在 Rating 组件中使用选择器，而是在 mapStateToProps 中使用它并像

<Rating
  stop={10}
  initialRate={selector(this.props.state, 'age')}
  onRate={(rate) => this.onRateChange(rate)}
  onChange={(value) => { this.changeRate("name", value) } }
/>


const selector = formValueSelector('rateForm');

const mapStateToProps = state => {
  return {
      state
  };
};

以上示例假设 props 可用于 Rating 组件。

Answer 2

你可以这样做：

import { getFormValues } from 'redux-form/immutable'

getFormValues将return保存的值对应form name提供。

const mapStateToProps = state => {
  const formState = getFormValues('rateForm')(state)
  console.log('formState...', formState)
  return formState 
}

这对我来说很好用。我正在获取此表单特有的所有 Field 组件的值，即您的 rateForm 。更多详情，您可以前往here.

Answer 3

@Ritesh 指出了解决方案：

const formName = "form";
const form = reduxForm<MyFormFields, MyFormProps>({form: formName});    

function MyForm() {
   return (
     <div>
        Here your form
     </div
   );

}

const mapStateToProps = (state: any) => ({
    initialValues: {
    },
    getFormFieldValue: (field: string) => {
        const selector = formValueSelector(formName);
        return selector(state, field);
    }
});

const mapDispatchToProps = (dispatch: Dispatch) => ({
    changeField: (field: string, value: any) => dispatch(change(formName, field, value)),
    resetForm: () => dispatch(reset(formName)),
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(form(MyForm)));

希望这对某人有所帮助！

Redux-Form，如何将 formValueSelector 与动态字段名称一起使用？

Redux-Form, how to use formValueSelector with dynamic Field names?

reactjs

redux-form

react-redux

react-redux-form