React / Redux表单将道具传递给孩子

时间:2016-05-18 10:17:16

标签: reactjs redux redux-form

我的项目中有一个视图,用户可以在其中检索页面列表,也可以创建新页面。我的代码如下所示:

父母组成部分(页面)

class Pages extends Component {
  render() {
    return (
      <div className="pages container">
        <div className="pages">
          <ul>
            <li>
              <CreateNewPage projectId={ this.props.params.id } />
            </li>
            <li>Map list of exisiting pages</li>
          </ul>
        </div>
      </div>
    );
  }
}

儿童组成部分(创建新页面)

class CreateNewPage extends Component {
  handleFormSubmit( { pageName, projectId } ) {
    this.props.CreatePage( { pageName, projectId } );
  }

  render() {
    const { handleSubmit, fields: { pageName, projectId } } =  this.props;

    return (
      <form onSubmit={ handleSubmit( this.handleFormSubmit.bind( this ) ) } >
        <label>Create new page</label>
        <input { ...pageName } type="text" placeholder="Project name" />
        <input { ...projectId } type="hidden" value={ this.props.projectId } />
        <button type="submit">Create new page</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'createPage',
  fields: [ 'pageName', 'projectId' ]
}, null, actions )( CreateNewPage );

页面从React Router收到一个ID作为道具,我想在我的&#34;创建新页面&#34;中使用Redux表格。组件,所以我可以将页面与我的数据库中的项目相关联。

我目前正在通过将其作为道具传递到&#34;创建新页面&#34;来提供项目ID。组件然后将其存储在隐藏的输入字段中。

这是我的第一个Redux应用程序,所以我想知道的是我正确地做了这个吗?非常感谢提前。

2 个答案:

答案 0 :(得分:4)

不是简单地在隐藏的输入中发送项目ID,你不能简单地将它作为参数传递给你的createPage函数吗?

this.props.createPage(projectId, { pageName });

其中projectId可以是this.props.projectId

答案 1 :(得分:3)

Joshua Slate的回答是正确的。 projectId根本不需要是字段。

在教育方面的注释......隐藏的输入在redux-form中没有意义。我将在this question上引用我的答案:

  

隐藏输入的概念在redux-form中并不存在,因为   隐藏的输入是基于提交表单的HTML方式。一个   redux-form中的“隐藏输入”只是一个出现在中的字段   字段列表(因此它将被提交),但不会呈现给任何字段   输入。我为主键执行此操作,其中我的字段列表为['id', 'name', 'email'],我只渲染名称和电子邮件的输入,但所有   三个提交。