मुझे घटक ए में सही डेटा मिल रहा है, अब मुझे उस मान को घटक बी में पास करने की आवश्यकता है। पहले घटक में एक क्लिक ईवेंट है जो क्लिक किए गए आइटम को प्राप्त करता है, अब मुझे उस क्लिक किए गए मान को घटक बी में पास करने की आवश्यकता है आगे स्वरूपण करें।

    class ReportsData extends Component {
    constructor(props) {
    super(props) 
        this.state = {
            value: null
    }
    render() {

    const {reports, employees} = this.props;
    let sortedReports = _.sortBy(reports, function(o) { return new moment(o.date); }).reverse();

    const handleClick = (item) => {
        return item // --> 2011 --> I NEED TO TAKE THIS VALUE AND PASS IT TO ReporstDetails COMPONENT // When I do setState = ({value: item}) error ???
    }

    const listReports = sortedReports.map(item => {

        return (
        <tr key={item.rowNumber}>
            <td>  {item.year}</td>

            <td> {item.month}</td>

            <td> {item.bruto_ukupno}</td>
            <td> {item.neto_plata}</td>
            <td> {item.topli_obrok}</td>

            <td> {item.doprinosi}</td>
            <td> {parseInt(item.ukupno_plata)}</td>

            <td className="table-actions">
                <Link onClick={this.handleClick.bind(this, item.year)}
                    to={`/reports/details`}>
                    <PieChart size="21"/>
                </Link>

            </td>
        </tr>
    )});

    return (
        <div className="container">
        <div>
            <header>
            <h4>A complete list of reports</h4>
            <p>Details available by clicking on an item </p>
            </header>
            <hr />
        </div>

        <table className="table table-striped">
        <thead>
        <tr>
            <th>Year</th>
            <th>Month</th>

            <th>Bruto</th>
            <th>Neto</th>
            <th>Meal</th>

            <th>Taxes</th>
            <th>Employees</th>
            <th>Details</th>
            <th></th>
       </tr>
        </thead>
         <tbody>
            {listReports}
        </tbody>
    </table>
   </div>
    );
}
}

export default ReportsData;

जब मैं सेटस्टेट करने की कोशिश करता हूं और इसे प्रॉप्स के रूप में पास करता हूं, तो मैं अपरिभाषित हो जाता हूं।

मैं एक नौसिखिया हूं, इसलिए कृपया मुझे क्षमा करें और मेरी मदद करें।

0
Dzenis H. 3 अप्रैल 2018, 14:34

4 जवाब

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

react-router Link . के state में अपना डेटा पास करने का सबसे आसान तरीका है

<Link to={{ pathname: '/reports/details', state: { item } }}>
    <PieChart size="21"/>
</Link>

और कंसोल this.props.location.state.item को /reports/details कॉम्पोनेन्ट में... आपको अपना डेटा मिल जाएगा

1
Ashh 4 अप्रैल 2018, 05:21

यदि घटक ए में कुछ राज्य मूल्य हैं यदि आपको अपने बच्चे के घटक बी को पास करने की आवश्यकता है, तो आपको इसे प्रोप के रूप में पास करने की आवश्यकता है।

इसे देखें reactjs.org

0
Srikanth Gowda 3 अप्रैल 2018, 11:52

आप जिस समस्या का सामना कर रहे हैं, वह Redux, MobX और कई अन्य flux जैसे ढांचे।

उन घटकों के बीच एक प्रोप को पारित करने का समाधान जिनके पास "माता-पिता" - "बच्चा" संबंध नहीं है, स्टोर का उपयोग करना है।

स्टोर में एप्लिकेशन स्थिति और तर्क होते हैं। उनकी भूमिका कुछ हद तक पारंपरिक एमवीसी में एक मॉडल के समान है, लेकिन वे कई वस्तुओं की स्थिति का प्रबंधन करते हैं - वे डेटा के एक रिकॉर्ड का प्रतिनिधित्व नहीं करते हैं जैसे ओआरएम मॉडल करते हैं। न ही वे बैकबोन के संग्रह के समान हैं। ओआरएम-शैली की वस्तुओं के संग्रह को प्रबंधित करने के अलावा, स्टोर एप्लिकेशन के भीतर किसी विशेष डोमेन के लिए एप्लिकेशन स्थिति का प्रबंधन करते हैं।

आपके एप्लिकेशन में कई स्टोर हो सकते हैं जहां आप अपने डेटा को समूहीकृत कर सकते हैं और अपने घटकों पर उपयुक्त एक का आयात/उपयोग कर सकते हैं।

ध्यान दें कि आप उन पुस्तकालयों में से किसी के बिना भी स्टोर अवधारणा का उपयोग कर सकते हैं, उदाहरण:

class UIStore {
    isModalActive = true;
}

const store = new UIStore();
export default store;

और फिर बस अपने स्टोर को अपने किसी भी रिएक्ट कंपोनेंट में इंपोर्ट करना

import {UIStore} from 'stores';

और फिर संपत्ति तक पहुंचना जैसे:

UIStore.isModalActive

या इसका मान सेट करें:

UIStore.isModalActive = false;

हालांकि मेरा सुझाव है कि उन पुस्तकालयों में से एक का उपयोग करें क्योंकि आपको छोटे आकार की परियोजनाओं के लिए भी जल्द से जल्द इसकी आवश्यकता होगी। वे आपके किसी भी घटक को सूचित कर सकते हैं जिसमें उन्हें शामिल किया गया है यदि उनका मूल्य बदलता है और तदनुसार उन्हें फिर से प्रस्तुत करता है।

Redux में उदाहरण स्टोर करें

MobX में उदाहरण स्टोर करें

1
Sotiris Kiritsis 3 अप्रैल 2018, 14:56

आप item को इस तरह पास कर सकते हैं:

<Link to={{"/reports/details", query: your state here}}>
    <PieChart size="21"/>
</Link>

फिर अपने बच्चे के घटक में आप इसका उपयोग कर सकते हैं:

this.props.location.query

1
Triyugi Narayan Mani 3 अप्रैल 2018, 11:48