React redux-form 实时从其他组件读取值 onchange

Question

这个简单的例子使用 redux-form-website-template 来显示值，我对 react 和 redux-form 很陌生，我什至不知道这是什么，我只想在其他组件中非常简单地读取值.

import React, { Component } from "react";

class ComponentOne extends Component {
  render() {
    return (
      <div>
        <div>CompoenntOne: I wannna read the props.values.firstName here</div>
        <div>CompoenntOne: I wannna read the props.values.lastName here</div>
      </div>
    );
  }
}

export default ComponentOne;

有什么方法或例子可以在其他组件中非常简单地显示该值？

Answer 1

每次 SimpleForm 的字段值更改时，更新后的值将保存在 Redux 的商店中。

为了获取表单的值：

您要做的第一件事是将 ComponentOne 连接到 Redux 的商店，以便访问表单的状态。
其次，您可以查询商店并获取 SimpleForm 的值。

类似的东西：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getFormValues } from 'redux-form'


class ComponentOne extends Component {
  render() {
    const { values } = this.props

    return (
      <div>
        <div>CompoenntOne: I wannna read the values.firstName here</div>
        <div>CompoenntOne: I wannna read the values.lastName here</div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  // 2. Secondly, you can query the Store and get the `SimpleForm`'s field value.
  values: getFormValues('simple')(state) || {}
})

// 1. First thing you have to do is to connect `ComponentOne` with the Redux's Store,
// in order to have access to the Form's state, because it's kept in the Store.
export default connect(mapStateToProps)(ComponentOne)

React redux-form 实时从其他组件读取值 onchange

React redux-form read value onchange from other component in real time

reactjs

redux-form