子コンポーネントから親コンポーネントへのデータの受け渡し

Question

現在、単純なReactアプリケーションを構築中です。私はいくつかのデータをラベールアプリケーションからwindow.exampleオブジェクトに渡しました。私はそのデータにアクセスしたいと思っており、私はpropsで最初にそれを行うことができることを知りました。しかし問題は、私がフォームを提出すると、AssignmentFormコンポーネントで、データを表示するAssignmentBox内のデータを更新し、データの行を追加したいということです。どうすればいい？

だから私の構造は次のようになります。

• DashboardApp
  • AssignmentBox
  • AssignmentFormNew

これは私のコードです：

main.js：

import swal from 'sweetalert'; 
import $ from 'jquery'; 
import React from 'react'; 
import { render } from 'react-dom'; 
import DashboardApp from './components/Dashboard'; 

render(
    <DashboardApp tracks={window.tracks} assignments={window.assignments} />, 
    document.getElementById('content') 
); 

Dashboard.js：

import React from 'react'; 
import {Grid, Row, Col} from 'react-bootstrap'; 
import TrackBox from './TrackBox'; 
import TrackFormStop from './TrackFormStop'; 
import TrackFormNew from './TrackFormNew'; 
import AssignmentBox from './AssignmentBox'; 
import AssignmentFormNew from './AssignmentFormNew'; 

class DashboardApp extends React.Component { 
    render() { 
     return (
      <Grid> 
       <Row> 
        <Col md={12}> 
         <AssignmentBox assignments={this.props.assignments} /> 
         <AssignmentFormNew /> 
        </Col> 
       </Row> 
      </Grid> 
     ) 
    } 
} 

export default DashboardApp; 

AssignmentBox.js

import React from 'react'; 
import {Panel} from 'react-bootstrap'; 

const title = (
    <h2>Current Assignments</h2> 
); 

class AssignmentBox extends React.Component { 
    render() { 
     return (
      <Panel header={title}> 
       <ul> 
        {this.props.assignments.map(item => (
         <li key={item.id}><a href="assignment/{item.slug}">{item.title}</a></li> 
        ))} 
       </ul> 
      </Panel> 
     ) 
    } 
} 

export default AssignmentBox; 

AssignmentFormNew.js

import React from 'react'; 
import {Panel, Button, FormGroup, ControlLabel} from 'react-bootstrap'; 
import $ from 'jquery'; 

const title = (
    <h2>New Assignment</h2> 
); 

const footer = (
    <Button bsStyle="primary" type="submit" block>New Assignment</Button> 
); 

class AssignmentFormNew extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      title: '', 
      description: '', 
      customer: '', 
      date: '' 
     }; 

     this.handleSubmit = this.handleSubmit.bind(this); 

     this.handleTitleChange = this.handleTitleChange.bind(this); 
     this.handleDescriptionChange = this.handleDescriptionChange.bind(this); 
     this.handleCustomerChange = this.handleCustomerChange.bind(this); 
     this.handleDeadlineChange = this.handleDeadlineChange.bind(this); 
    } 

    handleSubmit (e) { 
     e.preventDefault(); 

     console.log(window.Laravel.csrfToken); 

     $.ajax({ 
      url: '/assignment', 
      type: 'POST', 
      data: { 
       _token: window.Laravel.csrfToken, 
       title: this.refs.title.value, 
       description: this.refs.description.value, 
       customer: this.refs.customer.value, 
       deadline: this.refs.deadline.value 
      }, 
      success: res => { 
       this.setState({ 
        title: '', 
        description: '', 
        customer: '', 
        deadline: '' 
       }); 

       console.log(res); 
      }, 
      error: (xhr, status, err) => { 
       console.error(status, err.toString()); 
      } 
     }); 
    } 

    handleTitleChange (event) { 
     this.setState({title: event.target.value}); 
    } 

    handleDescriptionChange (event) { 
     this.setState({description: event.target.value}); 
    } 

    handleCustomerChange (event) { 
     this.setState({customer: event.target.value}); 
    } 

    handleDeadlineChange (event) { 
     this.setState({deadline: event.target.value}); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <Panel header={title} footer={footer}> 
        <FormGroup controlId="assignmentTitle"> 
         <ControlLabel>Title</ControlLabel> 
         <input type="text" ref="title" placeholder="e.g. Crowdfunding module for prestashop" className="form-control" value={this.state.title} onChange={this.handleTitleChange} /> 
        </FormGroup> 
        <FormGroup controlId="assignmentDescription"> 
         <ControlLabel>Description</ControlLabel> 
         <textarea className="form-control" ref="description" rows="10" value={this.state.description} onChange={this.handleDescriptionChange} /> 
        </FormGroup> 
        <FormGroup controlId="assignmentCustomer"> 
         <ControlLabel>Customer</ControlLabel> 
         <input type="text" placeholder="e.g. John Doe" ref="customer" className="form-control" value={this.state.customer} onChange={this.handleCustomerChange} /> 
        </FormGroup> 
        <FormGroup controlId="assignmentDeadline"> 
         <ControlLabel>Deadline</ControlLabel> 
         <input type="date" className="form-control" ref="deadline" value={this.state.deadline} onChange={this.handleDeadlineChange} /> 
        </FormGroup> 
       </Panel> 
      </form> 
     ) 
    } 
} 

export default AssignmentFormNew; 

ありがとうございます。

Answer 1

割り当てボックスにメソッドを作成してデータを更新し、その関数を代入フォームの小道具として渡します。代入形式で関数を呼び出し、データを渡します。

Answer 2

Dashboard.jsでのごhandleSubmit（）関数を入れて、AssignmentFormNew.jsの変更に続いて、次のコード

constructor (props) { 
     super(props); 
     this.state = { 
      assignments:this.props.assignments 
     }; 
} 

handleSubmit (e) { 
    ... your ajax code 
    this.setState({assignments:res}) 
} 

<AssignmentBox assignments={this.state.assignments} handleSubmit={this.handleSubmit}/> 

を追加します。Submitをクリックすると

<form onSubmit={this.props.handleSubmit}> 

基本的に、それは親のを呼び出しますDashboard.jsでhandleSubmit関数を実行した後、ajax呼び出しの後で、AssignmentBoxが新しいデータで再レンダリングするように状態を更新します。 AssignmentFormNew.js

handleSubmit (e) { 
    e.preventDefault(); 
    this.props.childValuesToParent(e); 
    ..... 
} 

で

Answer 3

は今、この小道具は親の内部で利用可能です - ややコールバックのようなこの

<AssignmentFormNew childValuesToParent={this.handleChange} /> 

ようDashboard.js。