मेरे पास दो घटक हैं। ये घटक विभिन्न मार्गों पर स्थित हैं। 'CreateItem' घटक मुझे नए आइटम बनाने की संभावना देता है। मैं सरणी में नए आइटम संग्रहीत करता हूं। ऐरे में नए बनाए गए आइटम शामिल होंगे। मैं इस संशोधित सरणी को घटक 'मुख्य' में भेजना चाहता हूं जहां मैं उन वस्तुओं को पुनरावृत्त करूंगा और उन्हें सूची के रूप में प्रदर्शित करूंगा।

यहाँ मेरा कोड है:

1) index.js फ़ाइल:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import {Main} from "./components/Main"
import {CreateItem} from "./components/CreateItem"
import {CurrentItem} from "./components/CurrentItem"


render(
    <BrowserRouter>
        <div> 
            <Route exact path="/" component={Main}/> 
            <Route path="/create_item" component={CreateItem}/>
            <Route path="/item" component={CurrentItem}/>
        </div>
    </BrowserRouter>,
    document.getElementById('app')
);

2) मेन.जेएस

import React from 'react';
import { withRouter } from 'react-router-dom';
import { Route, browserHistory } from 'react-router-dom';

export class Main extends React.Component {

    render(){
        const ToCreateItemPageButton = () => (
            <Route render={({ history}) => (
                <button type='button' onClick={() => { history.push('/create_item') }}>Move to create item page!</button>
             )}
            />
        )

        return (
            <div>
                <h1>Main Page</h1>
                <ToCreateItemPageButton/>
            </div>
        );
    }
}

3) CreateItem.js

import React from 'react'; 
import { Route, browserHistory } from 'react-router-dom';

export class CreateItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mainArray: [],
            item: {},
            item_id: 0,
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({item: {item_id: this.state.item_id, 
                       name:event.target.value}});
    }

    handleSubmit(event) {
        if (this.state.item.name.length > 0) {
        this.state.mainArray.push(this.state.item);
        this.state.item_id = this.state.item_id + 1;
        let data = JSON.stringify(this.state.mainArray);
        localStorage.setItem('mainObject', data);
        this.setState(
            {mainArray : this.state.mainArray,
            item_id : this.state.item_id,}
        );
        event.preventDefault();
        }
    }

    render(){
        const ToMainPageButton = () => (
            <Route render={({ history}) => (
                <button type='button' onClick={() => { history.push('/') }}>Move to main page!</button>
             )}
            />
        )
        return (
            <div>
                <h1>Create new item</h1>
                <ToMainPageButton/>
                <form onSubmit={this.handleSubmit}>
                    <label>
                          <input type="text" value={this.state.value} onChange={this.handleChange} />
                    </label>
                <input type="submit" value="Submit" />
                </form>
            </div>

        );
    }
}

तो मैं चाहता हूं कि मेरे mainArray को 'CreateItem' घटक से 'Main' घटक में स्थानांतरित करने की संभावना हो।

1
Stepan Kovalyshyn 2 जिंदा 2018, 00:22

2 जवाब

सबसे बढ़िया उत्तर

आप रीडायरेक्ट कर सकते हैं और इस तरह डेटा भेज सकते हैं:

this.props.history.push({
  pathname: '/target-path',
  data: [/*your data*/]
});

और इसे लक्ष्य घटक पर प्राप्त करें ताकि:

const { data } = this.props.location;
1
Lefi Tarik 2 जिंदा 2018, 00:56

संक्षिप्त उत्तर - हां यह संभव है कंटेनर घटक का उपयोग करना जैसे fiddle उदाहरण।

तो विचार यह है कि आप एक कंटेनर स्थिति में वस्तुओं की सरणी रखें और इसे "पुनरावृत्त" घटक के साथ-साथ आने वाली वस्तु को संभालने के लिए कॉलबैक में पास करें।

// container component
class Container extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        array: ['Hello', 'Stack', 'Overflow']
    }
    this.handleOnAdd = this.handleOnAdd.bind(this)
  }

  handleOnAdd(item){
    this.setState({
        array: [...this.state.array, item]
    })
  }

  render() {
    return (
      <div>
        // pass shared props to "display" component
        <ChildOneDisplay items={this.state.array} />  
        // pass a callback to CreateItem component
        <ChildTwoAdd onAdd={this.handleOnAdd} />  
      </div>
    );
  }
}

// display component

class ChildTwoAdd extends React.Component{
  constructor(props){
    ...
    this.handleAdd = this.handleAdd.bind(this)
  }
  handleAdd(){
    this.props.onAdd(this.state.item);
    ...
  }
  render(){
    return(
      <div>
        <input
          name="item"
          type="text"
          onChange={this.handleChange}
          value={this.state.item}
        />
        <button onClick={this.handleAdd}>Add Me</button>
      </div>
    )
  }
}

तो आपको बस अपने दो मार्गों को एक कंटेनर घटक के साथ लपेटना है और उन दोनों को प्रॉप्स पास करना है जैसा कि मैंने इस उदाहरण में किया था।

// So your container should look like the following one

render(){
  return (
    <div>
       <Route exact path="/" render={() => <Main items={this.state.array}}/> 
       <Route path="/create_item" render={() => <CreateItem onAdd={this.handleAdd}/>}/>
    </div>
  )
}

// And render it as the following
<BrowserRouter>
  <Container />
  <Route path="/item" component={CurrentItem}/>
</BrowserRouter>

इसके अलावा मेरा सुझाव है कि redux देखें - यह आपके ऐप की स्थिति को प्रबंधित करने के लिए लाइब्रेरी है।

धन्यवाद!

1
The Reason 2 जिंदा 2018, 01:17