लक्ष्य:
जब आप देश के नाम वाले सेल (केवल कॉलम देश के लिए) में से किसी एक को दबाते हैं, तो देश के नाम के साथ एक अलर्ट संदेश प्रदर्शित होना चाहिए।

समस्या:
स्रोत कोड में मुझे कौन सा भाग याद आ रहा है।
लक्ष्य को प्राप्त करने के लिए कौन से सिंटैक्स कोड की आवश्यकता है पता नहीं है।
कोई सलाह?

जानकारी:
मैं प्रतिक्रिया में नौसिखिया हूँ।

स्टैकब्लिट्ज:
https://stackblitz.com/edit/react-faabjl

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  sayHello() {
    alert('');
  }

  render() {
    return (
  <div>
    <Hello name={this.state.name} />

    <table border="1">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td onClick={this.sayHello}>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td onClick={this.sayHello}>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td onClick={this.sayHello}>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td onClick={this.sayHello}>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td onClick={this.sayHello}>Italy</td>
        </tr>
      </tbody>
    </table>



      </div>
      );
    }
   }

   render(<App />, document.getElementById('root'));
0
What'sUP 1 फरवरी 2020, 10:03

2 जवाब

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

मुझे लगता है कि यह वही है जो आप चाहते हैं, हैलो घटक के काम करने के लिए आपको इसके मूल्य को अपडेट करने में सक्षम होने के लिए अपने राज्य को अपडेट करने की आवश्यकता है, और ऐसा करने के लिए आपको अपने ईवेंट श्रोता को अपने वर्ग घटक जैसे बाध्य करना होगा यह:

this.sayHello = this.sayHello.bind(this);

निम्नलिखित पूर्ण कोड स्निपेट है:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello(e) {
    this.setState({
      name: e.target.textContent
    });
    alert(e.target.textContent);
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

        <table border="1">
          <thead>
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Alfreds Futterkiste</td>
              <td>Maria Anders</td>
              <td onClick={this.sayHello}>Germany</td>
            </tr>
            <tr>
              <td>Centro comercial Moctezuma</td>
              <td>Francisco Chang</td>
              <td onClick={this.sayHello}>Mexico</td>
            </tr>
            <tr>
              <td>Ernst Handel</td>
              <td>Roland Mendel</td>
              <td>Austria</td>
            </tr>
            <tr>
              <td>Island Trading</td>
              <td>Helen Bennett</td>
              <td onClick={this.sayHello}>UK</td>
            </tr>
            <tr>
              <td>Laughing Bacchus Winecellars</td>
              <td>Yoshi Tannamuri</td>
              <td onClick={this.sayHello}>Canada</td>
            </tr>
            <tr>
              <td>Magazzini Alimentari Riuniti</td>
              <td>Giovanni Rovelli</td>
              <td onClick={this.sayHello}>Italy</td>
            </tr>
          </tbody>
        </table>



      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

आप जावास्क्रिप्ट में एक सामान्य घटना की तरह sayHello() का इलाज कर सकते हैं

https://stackblitz.com/edit/react-3zzcoe?file=index.js

0
ROOT 1 फरवरी 2020, 10:19

डिफ़ॉल्ट रूप से आपके Sayhello फ़ंक्शन में ईवेंट ऑब्जेक्ट होता है। इसके द्वारा आप देश का नाम निकाल सकते हैं जिसे प्रदर्शित करने की आवश्यकता है। मैंने आपका कोड फिर से लिखा है। हालांकि तालिका डेटा के बड़े सेट के लिए आपको वस्तुओं की पूरी सरणी पर पुनरावृति करने और परिणाम प्रदर्शित करने के लिए मानचित्र फ़ंक्शन का उपयोग करने की आवश्यकता है।

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  sayHello(e) {
    alert(e.target.innerHTML);
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

        <table border="1">
          <thead>
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Alfreds Futterkiste</td>
              <td>Maria Anders</td>
              <td onClick={this.sayHello}>Germany</td>
            </tr>
            <tr>
              <td>Centro comercial Moctezuma</td>
              <td>Francisco Chang</td>
              <td onClick={this.sayHello}>Mexico</td>
            </tr>
            <tr>
              <td>Ernst Handel</td>
              <td>Roland Mendel</td>
              <td>Austria</td>
            </tr>
            <tr>
              <td>Island Trading</td>
              <td>Helen Bennett</td>
              <td onClick={this.sayHello}>UK</td>
            </tr>
            <tr>
              <td>Laughing Bacchus Winecellars</td>
              <td>Yoshi Tannamuri</td>
              <td onClick={this.sayHello}>Canada</td>
            </tr>
            <tr>
              <td>Magazzini Alimentari Riuniti</td>
              <td>Giovanni Rovelli</td>
              <td onClick={this.sayHello}>Italy</td>
            </tr>
          </tbody>
        </table>



      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

आप इस तरह के मानचित्र फ़ंक्शन का उपयोग कर सकते हैं।

let array = [{company:'Alfreds Futterkiste',contact:'Maria Anders',Country:'Germany'},{company:'centro',contact:'Franciso',country:'Mexico'}]

अब आप मानचित्र फ़ंक्शन के साथ सरणी पर पुनरावृति कर सकते हैं।

array.map(element=>{
    return <tr key={element.company}>
    <td>{element.company}</td>
    <td>{element.contact}</td>
    <td onClick={this.sayhello}>{element.country}</td>
</tr>
}
1
Manav jethani 1 फरवरी 2020, 10:33