javascript - प्रतिक्रिया में गतिशील रूप के इनपुट मूल्यों को कैसे साफ़ करें




reactjs (3)

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

पूर्ण कोड यहां उपलब्ध है: https://codesandbox.io/s/beautiful-archimedes-o1ygt

मैं एक रीसेट बटन बनाना चाहता हूं, जो सभी इनपुट मानों को साफ करता है और आइटमवॉल सरणी को शून्य करने के लिए आरम्भ करता है। यहां तक ​​कि अगर मैं मानों को शून्य करने के लिए सेट करता हूं, तो यह इनपुट फ़ील्ड को स्पष्ट नहीं करता है।

हालाँकि, मैं जो समस्या का सामना कर रहा हूँ, वह यह है कि यह एक गतिशील रूप है और एक कार्यात्मक घटक है, जिसमें प्रत्येक व्यक्ति के लिए कोई पूर्वनिर्धारित अवस्था नहीं होती है क्योंकि फ़ील्ड को अशक्त करने के लिए मूल्य निर्धारित करना मुश्किल होता है। क्या कोई मदद कर सकता है, मैं लंबे समय से इस पर अटका हूं


आप आइटमों की अज्ञात संख्या N की स्थिति का प्रबंधन करना चाहते हैं, इसे प्राप्त करने का एक तरीका एकल ऑब्जेक्ट को प्रबंधित करना है जिसमें सभी राज्य शामिल हैं, उदाहरण के लिए, setValuesManager N इनपुट का प्रबंधन करता है और button क्लिक करके इसकी स्थिति को रीसेट करता है:

function TextAreaManager() {
  const [valuesManager, setValuesManager] = useState([...items]);
  return (
    <Flexbox>
      {valuesManager.map((value, i) => (
        <TextBoxItem
          key={i}
          value={value}
          onChange={e => {
            valuesManager[i] = e.target.value;
            setValuesManager([...valuesManager]);
          }}
        />
      ))}
      <PinkButton
        onClick={() =>
          setValuesManager([...Array(valuesManager.length).fill('')])
        }
      >
        Reset All
      </PinkButton>
    </Flexbox>
  );
}

डेमो:


आपको आइटम रीसेट करने का तरीका दिखाने के लिए यहां एक कोडैंडबॉक्स दिया गया है: https://codesandbox.io/s/romantic-heisenberg-93qi7

मैंने आपके लिए एक नोट भी छोड़ा है कि इसे अपने एपीआई डेटा के साथ कैसे काम करें, onChangeText() अंदर टिप्पणी देखें onChangeText()

समस्या यह है कि आपके द्वारा कटौती के रूप में इनपुट राज्य द्वारा नियंत्रित नहीं हैं। हमें आपके API से प्रत्येक आइटम के लिए एक अपडेटेड ऑब्जेक्ट बनाना चाहिए, जिससे उसे value प्रॉप मिले।

index.js

import React from "react";
import ReactDOM from "react-dom";
import Cart from "./Cart";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Items: [],
      itemvalues: [{}]
    };
    this.onChangeText = this.onChangeText.bind(this);
    this.getItems = this.getItems.bind(this);
    this.handleReset = this.handleReset.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.findFieldIndex = this.findFieldIndex.bind(this);
    this.trimText = this.trimText.bind(this);
  }

  getItems = () => {
    /*if the data is coming from an API, store it in an array then .map() over it.
     we can add a value prop to the object like:
      so you can do something like:

      const newItems = [...apiData].map((item) => {
        return {
          ...item,
          value: ""
        }
      })

      this.setState({
        Items: newItems
      })
     */

    this.setState({
      Items: [
        {
          name: "item1",
          description: "item1",
          group: "groupA",
          dtype: "str",
          value: ""
        },
        {
          name: "item2",
          description: "item2",
          group: "groupA",
          dtype: "str",
          value: ""
        },
        {
          name: "item3",
          description: "item3",
          group: "groupB",
          dtype: "str",
          value: ""
        },
        {
          name: "item4",
          description: "item4",
          group: "groupB",
          dtype: "str",
          value: ""
        }
      ]
    });
  };

  onChangeText = e => {
    const updatedItems = [...this.state.Items].map(item => {
      if (item.name === e.target.name) {
        return {
          ...item,
          value: e.target.value
        };
      } else {
        return item;
      }
    });

    const updatedItemValues = [...updatedItems].reduce((obj, curr) => {
      if (!obj[curr.group]) {
        obj[curr.group] = [];
      }
      obj[curr.group] = [...obj[curr.group], { [curr.name]: curr.value }];
      return obj;
    }, {});

    this.setState({
      ...this.state,
      Items: updatedItems,
      itemvalues: updatedItemValues
    });
  };

  findFieldIndex = (array, name) => {
    return array.findIndex(item => item[name] !== undefined);
  };
  trimText(str) {
    return str.trim();
  }

  handleReset = () => {
    const resetedItems = [...this.state.Items].map(item => {
      return {
        ...item,
        value: ""
      };
    });

    this.setState(
      {
        ...this.state,
        Items: resetedItems,
        itemvalues: []
      },
      () => console.log(this.state)
    );
  };

  handleSubmit = () => {
    console.log(this.state.itemvalues);
  };

  render() {
    return (
      <div>
        {
          <Cart
            Items={this.state.Items}
            getItems={this.getItems}
            handleSubmit={this.handleSubmit}
            handleReset={this.handleReset}
            onChangeText={this.onChangeText}
          />
        }
      </div>
    );
  }
}

Cart.js

import React, { useEffect } from "react";
import Form from "./Form";

const Cart = props => {
  useEffect(() => {
    props.getItems(props.Items);
  }, []);

  return (
    <div>
      <Form Items={props.Items} onChangeText={props.onChangeText} />

      <button onClick={props.handleSubmit}>Submit</button>
      <button onClick={props.handleReset}>Reset</button>
    </div>
  );
};

export default Cart;

कार्ट कंपोनेंट ज्यादातर एक जैसे ही रह सकते हैं, हमें useEffect() निर्भरता का props.items करने के लिए useEffect() में पास होने की आवश्यकता नहीं है।

Form.js

import React from "react";

const Form = props => {
  return (
    <div>
      {props.Items.map(item => {
        return (
          <input
            name={item.name}
            placeholder={item.description}
            data-type={item.dtype}
            data-group={item.group}
            onChange={e => props.onChangeText(e)}
            value={item.value}
          />
        );
      })}
    </div>
  );
};
export default Form;

अब Form घटक में, हम प्रत्येक इनपुट को एक वैल्यू प्रोप प्रदान करते हैं जो हमारे ऊपरी-सबसे मूल घटक-स्थिति वाले आइटम से जुड़ा होता है।

मूल्यों को रीसेट करने के लिए आपको बस इतना ही चाहिए।


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

इसका मतलब यह है कि मूल घटक में आप एक ऐसी विधि को परिभाषित करने में सक्षम होंगे जो अपने राज्य में संग्रहीत सभी आइटम मूल्यों को साफ करता है। जो शायद कुछ इस तरह दिखेगा

resetInputs = () => {
    this.setState({
        inputFields: this.state.inputFields.map(inputField => {
            ...inputField,
            value: ''
        }
    })
}

आपको यह भी लिखना होगा कि आप अपने कोड को इनपुट के लिए किस तरह का टैग चाहते हैं।

तो आपके द्वारा साझा किए गए चाइल्ड कंपोनेंट के कोड के लिए आप क्या करेंगे, कुछ इस तरह है:

const Form = (props) => {
    return (
    <div>
        {props.Items.map(item => (
          <input
            name={item.name}
            value={item.value}
            placeholder={item.description}
            onChange={e => props.onChangeText(e)}
          /> 
        )
        )}
      </div> 
    );
}
export default Form 




reactjs