উপাদান ui থেকে স্বতঃপূত অংশগুলিতে পরিবর্তন পরিচালনা করুন

Question

আমি Autocompleteইনপুট ট্যাগগুলির জন্য উপাদানটি ব্যবহার করতে চাই । আমি ট্যাগগুলি পাওয়ার এবং সেগুলিকে একটি স্টেটে সংরক্ষণ করার চেষ্টা করছি যাতে আমি পরে সেগুলি ডেটাবেসে সংরক্ষণ করতে পারি। আমি প্রতিক্রিয়া ক্লাস পরিবর্তে ফাংশন ব্যবহার করছি। আমি চেষ্টা করেছিলাম onChange, কিন্তু আমি কোনও ফল পাইনি।

<div style={{ width: 500 }}>
    <Autocomplete
        multiple
        options={autoComplete}
        filterSelectedOptions
        getOptionLabel={option => option.tags}
        renderInput={params => (<TextField
                className={classes.input}
                {...params}
                variant="outlined"
                placeholder="Favorites"
                margin="normal"
                fullWidth />)} />

Answer 1

ইউকি যেমন ইতিমধ্যে উল্লেখ করেছে, নিশ্চিত হয়ে নিন যে আপনি onChangeফাংশনটি সঠিকভাবে ব্যবহার করেছেন । এটি দুটি পরামিতি গ্রহণ করে। ডকুমেন্টেশন অনুযায়ী:

স্বাক্ষর : function(event: object, value: any) => void।

event: কলব্যাকের ইভেন্ট উত্স

value: নাল (স্বয়ংক্রিয়রূপ উপাদানগুলির মধ্যে মান / মান)।

এখানে একটি উদাহরণ:

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

export default class Tags extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: []
    };
    this.onTagsChange = this.onTagsChange.bind(this);
  }

  onTagsChange = (event, values) => {
    this.setState({
      tags: values
    }, () => {
      // This will output an array of objects
      // given by Autocompelte options property.
      console.log(this.state.tags);
    });
  }

  render() {
    return (
      <div style={{ width: 500 }}>
        <Autocomplete
          multiple
          options={top100Films}
          getOptionLabel={option => option.title}
          defaultValue={[top100Films[13]]}
          onChange={this.onTagsChange}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      </div>
    );
  }
}

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
];

Comments

আপনাকে অনেক ধন্যবাদ আমি টেক্সটফিল্ড কম্পোনেন্টে অন্বেষণ ব্যবহার করছিলাম

— বুক লাউ

Answer 2

আপনি কি নিশ্চিত যে আপনি onChangeসঠিকভাবে ব্যবহার করেছেন ?

onChange স্বাক্ষর :function(event: object, value: any) => void

Comments

আপনাকে অনেক ধন্যবাদ আমি টেক্সটফিল্ড কম্পোনেন্টে অন্বেষণ ব্যবহার করছিলাম

— বুক লাউ

Answer 3

@Dworo

ইনপুট ক্ষেত্রে ড্রপডাউন থেকে নির্বাচিত আইটেমটি প্রদর্শন করতে যে কারও সমস্যা রয়েছে।

আমি একটি workaround খুঁজে পেয়েছি। মূলত আপনাকে একটি বাঁধাই করার আছে inputValueএ onChageউভয়ের জন্য Autocompleteএবং TextField, চরম বাজে মেটারিয়াল UI।

const [input, setInput] = useState('');

<Autocomplete
  options={suggestions}
  getOptionLabel={(option) => option}
  inputValue={input}
  onChange={(e,v) => setInput(v)}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField {...params} label="Combo box" onChange={({ target }) => setInput(target.value)} variant="outlined" fullWidth />
  )}
/>

Answer 4

  <Autocomplete
                disableClearable='true'
                disableOpenOnFocus="true"
                options={top100Films}
                getOptionLabel={option => option.title}
                onChange={this.onTagsChange}
                renderInput={params => (
                  <TextField
                    {...params}
                    variant="standard"
                    label="Favorites"
                    margin="normal"
                    fullWidth
                  />
                )}
                />

উপরের কোডটি ব্যবহার করার পরে, আমি এখনও নির্বাচিত বিকল্পটি প্রদর্শন করতে স্বতঃপূরণ বাক্সটি পেতে পারি না .. কোনও ধারণা বলছি?

Comments

onTagsChange = (ইভেন্ট, মান) => {কনস্ট {হ্যান্ডেল চেঞ্জ this = এই.পড়গুলি; হ্যান্ডেল চেঞ্জ ('অনুসন্ধান কিওয়ার্ড', মান)}

— ডিওরো

আমার ঠিক একই সমস্যা আছে, ডক্স থেকে কোডটি অনুলিপি করেছিলাম এবং এটি কাজ করছে না। অবিশ্বাস্য!

— দেদা

Answer 5

ব্যাকএন্ড থেকে আমার ট্যাগগুলি পাওয়ার জন্য প্রতিটি ইনপুট পরিবর্তনে আমার এপিটি হিট করা দরকার!

আপনি যদি প্রতিটি ইনপুট পরিবর্তনে আপনার প্রস্তাবিত ট্যাগগুলি পেতে চান তবে ম্যাটেরিয়াল-ইউআই অনপুট ব্যবহার করুন!

this.state = {
  // labels are temp, will change every time on auto complete
  labels: [],
  // these are the ones which will be send with content
  selectedTags: [],
}
}

//to get the value on every input change
onInputChange(event,value){
console.log(value)
//response from api
.then((res) => {
      this.setState({
        labels: res
      })
    })

}

//to select input tags
onSelectTag(e, value) {
this.setState({
  selectedTags: value
})
}


            <Autocomplete
            multiple
            options={top100Films}
            getOptionLabel={option => option.title}
            onChange={this.onSelectTag} // click on the show tags
            onInputChange={this.onInputChange} //** on every input change hitting my api**
            filterSelectedOptions
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                label="Multiple values"
                placeholder="Favorites"
                margin="normal"
                fullWidth
              />

Answer 6

আমি স্বতঃপূরণ থেকে কোনও বিকল্প নির্বাচন করার সময় আমি আমার রাজ্য আপডেট করতে চাইতাম। আমার কাছে একটি গ্লোবাল অন চেঞ্জ হ্যান্ডলার ছিল যা সমস্ত ইনপুট পরিচালনা করে

         const {name, value } = event.target;
         setTukio({
          ...tukio,
          [name]: value,
        });

যা ক্ষেত্রের নামের উপর ভিত্তি করে অবজেক্টটিকে গতিশীলভাবে আপডেট করে। তবে স্বতঃপূরণে নামটি ফাঁকা ফিরে আসে। তাই আমি থেকে হ্যান্ডলার পরিবর্তিত onChangeকরতে onSelect। তারপরে হয় পরিবর্তনটি পরিচালনা করার জন্য একটি পৃথক ফাংশন তৈরি করুন বা আমার ক্ষেত্রে যেমন নামটি পাস না করা হয়েছে কিনা তা পরীক্ষা করতে একটি if স্টেটমেন্ট যুক্ত করুন।

// This one will set state for my onSelect handler of the autocomplete 
     if (!name) {
      setTukio({
        ...tukio,
        tags: value,
      });
     } else {
      setTukio({
        ...tukio,
        [name]: value,
      });
    }

যদি আপনার একটি স্বতঃপূরণ থাকে তবে উপরোক্ত পদ্ধতির কাজ করে। আপনার যদি একাধিক থাকে তবে নীচের মতো একটি কাস্টম ফাংশন পাস করতে পারেন

<Autocomplete
    options={tags}
    getOptionLabel={option => option.tagName}
    id="tags"
    name="tags"
    autoComplete
    includeInputInList
    onSelect={(event) => handleTag(event, 'tags')}
          renderInput={(params) => <TextField {...params} hint="koo, ndama nyonya" label="Tags" margin="normal" />}
        />

// The handler 
const handleTag = ({ target }, fieldName) => {
    const { value } = target;
    switch (fieldName) {
      case 'tags':
        console.log('Value ',  value)
        // Do your stuff here
        break;
      default:
    }
  };