React / Redux 表单将道具传递给 children

Question

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

PARENT 组件（页数）

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>
    );
  }
}

CHILD 组件（创建新页面）

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 );

Pages 从 React Router 接收一个 ID 作为道具，我想在我的 "Create New Page" 组件中将其提供给 Redux Form，这样我就可以将页面与我的数据库中的项目相关联。

我目前通过将项目 ID 作为道具传递给 "Create New Page" 组件然后将其存储在隐藏的输入字段中来提供项目 ID。

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

Answer 1

与其在隐藏输入中发送项目 ID，不如将其作为参数传递到 createPage 函数中？

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

其中 projectId 可能是 this.props.projectId

Answer 2

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

关于教育方面的说明...隐藏的输入在 redux-form 中没有意义。我会在 this question:

上引用我的回答

The concept of hidden inputs doesn't really exist in redux-form, as hidden inputs are based on the ye olde HTML way of submitting forms. A "hidden input" in redux-form is just a field that appears in the fields list (so it will be submitted), but that is not rendered to any input. I do this for primary keys, where my fields list is ['id', 'name', 'email'], and I only render inputs for name and email, but all three get submitted.

React / Redux 表单将道具传递给 children

React / Redux Form passing props to children

reactjs

redux

redux-form