React / Redux Form将道具传递给孩子

Question

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

父组件（页面）

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作为道具，我想在“创建新页面”组件的Redux表单中使用该ID，以便将该页面与数据库中的项目关联。

我目前正在通过将项目ID作为道具传递到“创建新页面”组件，然后将其存储在隐藏的输入字段中来使项目ID可用。

这是我的第一个Redux应用程序，所以我想知道我是否正确执行了此操作？ 提前谢谢了。

Answer 1

除了将项目ID发送给隐藏的输入外，您难道不能简单地将其作为参数传递给createPage函数吗？

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

其中projectId可以是this.props.projectId

Answer 2

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

从教育的角度来看...隐藏的输入在redux-form没有意义。 我会在这个问题上引用我的答案：

隐藏输入的概念实际上并没有以redux形式存在，因为隐藏输入是基于旧的HTML提交表单的方式。 Redux形式的“隐藏输入”只是一个出现在字段列表中的字段（因此它将被提交），但是不会呈现给任何输入。 我是针对主键执行此操作的，其中我的字段列表为['id', 'name', 'email'] ，并且我仅呈现名称和电子邮件的输入，但所有三个都提交。