1

私のプロジェクトには、ユーザーがページのリストを取得したり、新しいページを作成したりできるビューがあります。私のコードは次のようになります。

親コンポーネント (ページ)

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

Pages は React Router から props として ID を受け取ります。これを「Create New Page」コンポーネントの Redux Form で利用できるようにして、ページを DB のプロジェクトに関連付けることができるようにします。

現在、プロジェクト ID をプロップとして「Create New Page」コンポーネントに渡し、非表示の入力フィールドに保存することで、プロジェクト ID を利用できるようにしています。

これは私の最初の Redux アプリケーションなので、これを正しく行っているか知りたいだけですか? よろしくお願いします。

4

2 に答える 2

4

プロジェクト ID を非表示の入力で送信するのではなく、createPage 関数の引数として単純に渡すことはできませんか?

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

projectId が this.props.projectId になる場所

于 2016-05-18T17:40:31.117 に答える
3

Joshua Slateの答えは正しいです。はprojectIdフィールドである必要はまったくありません。

教育的な補足として...非表示の入力は では意味がありませんredux-form。この質問に対する私の答えを引用します：

非表示の入力はフォームを送信する古い HTML の方法に基づいているため、非表示の入力の概念は redux-form には実際には存在しません。redux-form の「隠し入力」は、フィールド リストに表示される (送信される) 単なるフィールドですが、どの入力にもレンダリングされません。フィールドリストが である主キーに対してこれを行い['id', 'name', 'email']、名前と電子メールの入力のみをレンダリングしますが、3 つすべてが送信されます。

于 2016-05-19T17:11:21.030 に答える