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




reactjs (4)

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

पूर्ण कोड यहां उपलब्ध है: 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 

देखें कि क्या यह आपके लिए काम करता है:

CodeSandbox पर कार्य उदाहरण

चूंकि आप पहले से ही अपने कोड के हिस्से में हुक का उपयोग कर रहे थे, इसलिए मैंने हुक (मेरी सलाह: हुक सीखें और वर्ग घटकों के बारे में भूल जाते हैं) का उपयोग करके अपनी कक्षा को एक कार्यात्मक घटक में बदल दिया है

मैंने आपके INITIAL_STATE एक value संपत्ति INITIAL_STATE इसलिए यह प्रत्येक इनपुट के लिए इनपुट मान inputItem

पूर्ण CODE:

index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormV2 from "./FormV2";

import "./styles.css";

function App() {
  const INITIAL_STATE = [
    {
      name: "item1",
      description: "item1",
      group: "groupA",
      dtype: "str",
      value: "" // ADDED VALUE PROPERTY TO KEEP THE INPUT 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: ""
    }
  ];

  const [inputItems, setInputItems] = useState(INITIAL_STATE);

  function handleChange(event, index) {
    const newValue = event.target.value;
    setInputItems(prevState => {
      const aux = Array.from(prevState);
      aux[index].value = newValue;
      return aux;
    });
  }

  function handleReset() {
    console.log("Reseting Form to INITIAL_STATE ...");
    setInputItems(INITIAL_STATE);
  }

  function handleSubmit() {
    inputItems.forEach(item =>
      console.log(
        "I will submit input: " + item.name + ", which value is: " + item.value
      )
    );
  }

  return (
    <FormV2
      handleSubmit={handleSubmit}
      handleReset={handleReset}
      handleChange={handleChange}
      inputItems={inputItems}
    />
  );
}

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

FormV2.js

import React from "react";

function FormV2(props) {
  const formInputItems = props.inputItems.map((item, index) => (
    <div key={item.name}>
      {item.name + ": "}
      <input
        type="text"
        data-type={item.dtype}
        data-group={item.group}
        placeholder={item.description}
        value={item.value}
        onChange={event => props.handleChange(event, index)}
      />
    </div>
  ));

  return (
    <React.Fragment>
      <form>{formInputItems}</form>
      <button onClick={props.handleSubmit}>Submit</button>
      <button onClick={props.handleReset}>Reset</button>
      <div>State: {JSON.stringify(props.inputItems)}</div>
    </React.Fragment>
  );
}

export default FormV2;




reactjs