Блог

В настоящее время я создаю простое приложение React. У меня есть некоторые данные, переданные window.example объекту из приложения laravel. Затем я хотел бы получить доступ к данным, и я обнаружил, что могу сделать это изначально props . Но проблема в том, что когда я отправляю форму в компоненте AssignmentForm, я хочу обновить данные в поле AssignmentBox, в котором отображаются данные, и добавить строку данных. Как бы я это сделал?

Итак, моя структура выглядит так:

• DashboardApp
  • Поле назначения
  • 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;
  

Заранее благодарю.

Поместите вашу функцию handleSubmit() в Dashboard.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}/>
  

Затем в AssignmentFormNew.js изменение:

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

В основном, когда вы нажимаете кнопку отправки, он вызывает родительскую функцию handleSubmit в Dashboard.js , затем после вашего вызова ajax обновите состояние, чтобы поле назначения повторно отобразило его с новыми данными.

Создайте метод в поле назначения для обновления данных и передайте эту функцию в качестве реквизита в форму назначения. Вызовите функцию в форме назначения и передайте данные.

в AssignmentFormNew.js

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

теперь этот реквизит доступен внутри родительского — Dashboard.js вот так

 <AssignmentFormNew childValuesToParent={this.handleChange} />
  

что-то вроде обратного вызова.