小编Tho*_*lan的帖子

我正在使用redux-form 6.0.0-rc.5,我试图显示用户输入的表单值.

但是,我希望从另一个组件显示这些值,而不是redux表单本身.

所以,我简化的App架构就是这样的:

<App />              -> (main component -container ?-)
  <List />           -> (connect to form values and pass them down)
    <Elem />         -> (display form value)
  <Form />           -> (enter form values)

该组件是一个redux形式安装到'形式',并正在工作.

Form = reduxForm({
  form: 'formName'
})(Form)

获取表单值(来自state form.formName.values)并将它们发送到我的Display组件的好方法是什么？

我尝试过的事情:

• 将App连接到商店和mapStateToProps(form.formName.values),然后将其作为道具传递给Display.但它会抛出一个错误,因为在表单状态中不存在值,直到用户输入任何内容为止.

• 使用由List组件内的redux-form提供的函数getFormValues('formName'),但它返回一个函数或未定义:

ELEM

const Elem = ({ name }) => (
  <li>{name}</li>
)

名单

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)

List = …

我正在尝试使用Bulma CSS Framework实现这种移动布局(红色标题和蓝色页脚都是固定的):

这是相应的代码:

<nav class="navbar is-danger is-fixed-top" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="index.php">
            <img src="http://via.placeholder.com/28x28" width="28" height="28">
        </a>
        <div class="navbar-burger burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item is-expanded">
            <i class="fa fa-user"></i>
            <p class="is-size-7">Account</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-list"></i>
            <p class="is-size-7">Tasks</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-flag"></i>
            <p class="is-size-7">Alerts</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-cog"></i>
            <p class="is-size-7">Settings</p>
        </a>
    </div>
</nav>
<div class="section">
    <h1>Content</h1>
    <p>Lorem ipsum …