मैं प्रतिक्रिया सीख रहा हूं और मैं एक घटक उत्पन्न करना चाहता हूं जो एक सरणी से एक सूची को मैप करता है। मैं फिर इस सरणी को अपडेट करने में सक्षम होना चाहता हूं और सूची भी अपडेट हो जाएगी।

यहाँ कुछ उदाहरण कोड है:

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  let numbers = props.numbers;

  function changeNumbers() {
    numbers = [3, 2, 1];
  }

  return (
    <React.Fragment>
      <input type="text" onChange={changeNumbers} />
      <ul>
        {numbers.map((number) => (
          <ListItem key={number.toString()} value={number} />
        ))}
      </ul>
    </React.Fragment>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

ऐसा लगता है कि एम्बेड चलाना नहीं चाहता है, इसलिए यहां एक कोडपेन है: https://codepen.io/GuerrillaCoder /पेन/केकेजीएलक्यूआर

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

यह उदाहरण तैयार किया गया है लेकिन जो मैं बनाने की उम्मीद कर रहा हूं वह एक टेक्स्ट इनपुट है जो परिणामों को एक सूची में फ़िल्टर करेगा।

0
Guerrilla 5 सितंबर 2020, 06:22

1 उत्तर

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

useState का उपयोग करें और numbers प्रोप को प्रारंभिक मान के रूप में उपयोग करें। परिवर्तन पर, घटक की स्थिति को अद्यतन करने के लिए राज्य प्रेषण फ़ंक्शन (setNumbers) को कॉल करें:

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const [numbers, setNumbers] = React.useState(props.numbers);
  function changeNumbers() {
    setNumbers([3, 2, 1]);
  }

  return (
    <React.Fragment>
      <input type="text" onChange={changeNumbers} />
      <ul>
        {numbers.map((number) => (
          <ListItem key={number.toString()} value={number} />
        ))}
      </ul>
    </React.Fragment>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

(useState द्वारा लौटाया गया दूसरा आइटम एक फ़ंक्शन है जो एक कार्यात्मक घटक के बाहर setState से मेल खाता है)

2
CertainPerformance 5 सितंबर 2020, 06:27