ReactJS ფორმები -> თბილისის ფორუმი

Welcome Guest ( ავტორიზაცია | რეგისტრაცია )

ვალიდაციის წერილის ხელახალი გაგზავნა

წესები · დახმარება · ძებნა · წევრები · კალენდარი · რჩეულები · ჩატი

თბილისის ფორუმი -> ტექნიკური კონფერენცია -> პროგრამირება -> Web Programming

გამოხმაურება · ახალი თემა · ახალი გამოკითხვა

ReactJS ფორმები

მივიღოთ შეტყობინება ამ თემის განახლების შესახებ · გაუგზავნეთ ეს გვერდი სხვას · ამოსაბეჭდი ვერსია | თემის რჩეულებში დამატება/წაშლა

solar_system Super Member ჯგუფი: Registered
solar_system Super Member ჯგუფი: Registered წერილები: 136 წევრი No.: 160495 რეგისტრ.: 29-January 13	#54738054 · 30 May 2019, 22:04 · · პროფილი · პირადი მიმოწერა · ჩატი მოკლედ რეაქტში ფორმებთან დაკავშირებით მაქვს ასეთი კითხვა, მოცემული მაქვს შემდეგი ორი კომპონენტი, პირობითად ლოგინის და რეგისტრაციის, როგორც ხედავთ ორივე კომპონენტში მოცემული ორი ფუნქცია არის იდენტური და მინდა მაგის რეფაქტორინგი რო ეგ ორი ფუნქცია და ერთი მაინც ცალკე მქონდეს რო ყოველთვის არ მიწევდეს მაგის დაწერა, ერთი გზა ვნახე რო მემკვიდრეობით შეიძლება გაკეთდეს მარა რეაქტის ქომუნითი მემკვიდრეობის გამოყენბას არ გვირჩევს ჰოდა რა ვქნა აღარ ვიცი, აშკარად კოდი მიმეორდება და რა შეიძლება რო ვქნა, თუ მასე უნდა დავტოვო მაშინ იქნებ ვინმე გამოცდილმა მითხრას რა მიზეზით შეიძლება რო მასე დავტოვო მიუხედავად კოდის დუპლიკაცისაა.
	· ციტირება · ^

Ramda
Super Member
ჯგუფი: Registered

Ramda
Super Member

ჯგუფი: Registered
წერილები: 205
წევრი No.: 249886
რეგისტრ.: 11-April 19

#54738695 · 31 May 2019, 00:29 · · პროფილი · პირადი მიმოწერა · ჩატი

მე ვერ ვიტყოდი რომ კოდი მეორდება
ამ შემთხვევაში 2 ცალი ერთმანეთისგან დამოუკიდებელი კომონენტი გაქვს
ასე რომ სრულიად ნორმალურია

შეგიძლია მამენტ ცალკე გაიტანო handleInputChange ფუნქცია და შეიტანო სადაც დაგჭირდება მაგალითად

helper.js

CODE

export const handleInputChange = ({target: {name, value }}) => this.setState({[name] : value});

და შემდეგ შეიტანო იმ კომპონენტში სადაც დაგჭირდება

CODE

import { handleInputChange } from ''../path"

მაგრამ ასეთ შემთხვევაში მგონი კონტექსტს დაკარგავ და ვერ გაიგებს რა არის setState

მაგის მოსაგვარებლად ერთი რაც მახსენდება ეხლა არის ის, რომ არგუმენტად მიაწოდო კონტექსი დე ივენთიც
მაგალითად

CODE

<input type="text" name="ramda" onChange={(e) => handleInputChange(e, this)} />

და ამ ფუნქციასაც ჩაასწორებს შესაბამისად

CODE

export const handleInputChange = ({target: {name, value }}, ctx) => ctx.setState({[name] : value});

This post has been edited by Ramda on 31 May 2019, 02:22

· ციტირება · ^

solar_system Super Member ჯგუფი: Registered
solar_system Super Member ჯგუფი: Registered წერილები: 136 წევრი No.: 160495 რეგისტრ.: 29-January 13	#54740055 · 31 May 2019, 12:20 · · პროფილი · პირადი მიმოწერა · ჩატი Ramda ვნახე უკვე სოლუშენი high order component ებით უნდა გაკეთდეს ერთი აბსტრაქტული კომპონენტი და props_ებით უნდა ჩაეწოდოს რაც ფუნქციაც მეორდება https://medium.com/backticks-tildes/reusing...D2ZaDmiF-DljROA აქედან ვიხილე ინსპირაცია და იმედია გამოგადგება. * * * Ramda ისე ზოგადად მემკვიდრეობას არ გვირჩევს რეაქტის ქომუნითი და თუ რამე აბსტრაქციების გაკეთება გინდათო კომპონენტების კომპოზიციით ყველაფერი კეთდებაო
	· ციტირება · ^

Ramda
Super Member
ჯგუფი: Registered

Ramda
Super Member

ჯგუფი: Registered
წერილები: 205
წევრი No.: 249886
რეგისტრ.: 11-April 19

#54740648 · 31 May 2019, 14:26 · · პროფილი · პირადი მიმოწერა · ჩატი

solar_system

უამრავი რამის მოფიქრება შეიძლება ფანტაზია + მანიპულაცია
აი მაგალითად ჩემი მაგალითი ეგრეთწოდებულ DRY ზე რაზეც გქონდა აქცენტი
შეიძლება პრაქტიკაში არ გამოიყენო მაგრამ ჩემი ტვინის ნაჟურია

CODE

import React, {useState} from 'react';

functi0n Form(props) {
const fileds = Array.from({length: Number(props.inputPoint)}, (_, idx) => `input_${idx + 1}`);
const initialState = fileds.reduce((acc, cur) => ({...acc, [cur]: ''}) ,{})
const [inputs, setInput] = useState(initialState);

functi0n onChangeHandler({target: {name, value}}) {
setInput(prevState => ({...prevState, [name]: value}))
props.callback(inputs);
}

return(
<div>
<form>
{fileds.map(field => (<input key={field} name={field} value={inputs[field]} onChange={onChangeHandler}/>))}
</form>
</div>
)
}

და მერე ამის გამოყენება სადმე სხვა კომპონენტში

CODE

<Form
inputPoint="3"
className="signin"
callback={(e) => console.log(e)}
/>

სადაც inputPoint ში უთითებ ინფუთ ფორმების რაოდენობას
და callback ქში იღებ დატას ონჩეინჯის

· ციტირება · ^

solar_system Super Member ჯგუფი: Registered
solar_system Super Member ჯგუფი: Registered წერილები: 136 წევრი No.: 160495 რეგისტრ.: 29-January 13	#54746229 · 1 Jun 2019, 19:40 · · პროფილი · პირადი მიმოწერა · ჩატი ანუ თუ საიტზე ბევრი ფორმა მექნება მასე ინფუთის სთეითის შეცვლის ფუნქცია ყოველჯერზე რო ხელით ვწერო არაა პრობლემა დიდი? ვთქვათ დავტოვო როგორ არის ახლა და კიდე დავანატო სხვა მსგავსი კომპონენტები სადაც ფორმები მექნება პრაქტიკაში რამდენად მოსულა ეგ რო მასე სათითაოდ მეწეროს ეგ ფუნქციები უფრო პირადი გამოცდილება მაინტერესებს მაგ თემას როგორ აგვარებთ შენ
	· ციტირება · ^

Ramda Super Member ჯგუფი: Registered
Ramda Super Member ჯგუფი: Registered წერილები: 205 წევრი No.: 249886 რეგისტრ.: 11-April 19	#54784423 · 9 Jun 2019, 18:38 · · პროფილი · პირადი მიმოწერა · ჩატი solar_system მე პირადათ პრობლემას ვერ ვხედავ შეგიძლია კი.... მაგრამ არის მომენტი მაგალითად input data გჭირდება სხვა კომპონენტში მაგალითად deep childern ებში სადაც two way data binding უბრალოდ წარმოყდგენელია გაააკეთო ამისთვის სთეით მენეჯმნეტისთვის ჩართვა რიდაქს და თუ დატას ჩატანა პროპებით გარულდება კონკრეტულ კომპონენტს wrapps გაუკეთებ connectით და მიიღებთ სთეითიდან დატას თავისუფლად... აქ რიდაქსის გამოყენებასაც თავისი წესები აქვს რა.... აღარ ვისაუბრებ ამაზე... ყოველთვის მაგას ვქადაგებ რომ სწორად დაგეგმილი საქმე(აპლიკაცია) საქმის ნახევარია.... This post has been edited by Ramda on 9 Jun 2019, 18:39
	· ციტირება · ^

1 მომხმარებელი ათვალიერებს ამ თემას (1 სტუმარი და 0 უჩინარი წევრი)

0 წევრი:

« აქეთ | Web Programming | იქით »

გამოხმაურება · ახალი თემა · ახალი გამოკითხვა

ფორუმის სერვერების განთავსებას და ინტერნეტთან კავშირს უზრუნველყოფს: CLOUD9

[ Script Execution time: 0.0246 ] [ 12 queries used ] [ GZIP Disabled ]