معرفی
در این مقاله قصد داریم نحوه ایجاد تگ را با کمک بسته UI مواد (ورودی تراشه) در برنامه ReactJS بیاموزیم.
پیش نیازها
- دانش اولیه React
- کد ویژوال استودیو باید نصب شود
- Node JS باید نصب شود
پروژه ReactJS را ایجاد کنید
مرحله 1
اولین قدم ایجاد یک پروژه React.js جدید با استفاده از دستور زیر است.
گام 2
پروژه تازه ایجاد شده را در کد ویژوال استودیو باز کنید و با استفاده از دستور زیر بسته های زیر را که نیاز دارید نصب کنید:
مرحله 3
سپس app.js را باز کنید و کد کامل را با کد زیر جایگزین کنید.
import './App.css';
import ChipInputExample from './chipInputExample';
function App() {
return (
<ChipInputExample></ChipInputExample>
)
}
export default App;
مرحله 4
یک فایل JSX با نام chipInputExample.jsx ایجاد کنید و کد زیر را در آن فایل اضافه کنید.
import ChipInput from 'material-ui-chip-input';
class ChipInputExample extends Component {
constructor() {
super();
this.state = {
sessionData: {
language: [],
skills: []
}
}
this.addChip = this.addChip.bind(this);
this.removeChip = this.removeChip.bind(this);
}
componentDidMount = () => {
}
addChip = (value, name) => {
const { sessionData } = this.state;
sessionData[name].push(value.charAt(0).toUpperCase() + value.slice(1));
this.setState({ sessionData });
};
removeChip = (chip, index, name) => {
const { sessionData } = this.state;
sessionData[name].splice(index, 1);
this.setState({ sessionData });
};
render() {
const { sessionData } = this.state;
return (
<Fragment>
<h3 align="center">Demo of material ui chip input</h3>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12">
<div style={{ margin: '1rem' }}>
<label htmlFor="uname1">Languages Used</label>
<div className="commonInputField">
<ChipInput
value={sessionData.language}
onAdd={value => this.addChip(value, "language")}
onDelete={(chip, index) => this.removeChip(chip, index, "language")}