پست ها توسط فرشته حقیقی

برای اینکار بصورت زیر عمل می کنیم:

function fillDropDown() {
  return (
    <select>
      <option value="React">react</option>
      <option value="Javasscript">javasscript</option>
      <option value="Spring">Spring</option>
    </select>
  );
}

برای  اینکار می توانیم از state استفاد  کنیم. به این صورت که آیتم ها را در  یک state  قرار داده و سپس  کمبو را با استفاده از این state پر کنیم.فرض کنیم در فرم خود میخواهیم یک کمبو شامل نام شهرها داشته باشیم:

function CityDropDown() {
  const [items] = React.useState([
    {
      label: "Tehhran",value: "1"},
    { label: "Shiraz", value: "2" },
    { label: "Ahvaz", value: "3" }
  ]);
  return (
    <select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

می توانیم به صورت مستقیم هم  بصورت زیر از lable و value استفاده کنیم:

<select>
  {items.map(({ label, value }) => (
    <option key={value} value={value}>
      {label}
    </option>
  ))}
</select>

برای اینکار می توانیم از متد ()componentDidMount استفاده کنیم.این متد بعد از اینکه کامپوننت رندر شد توسط ریکت فراخوانی می شود.

در این متد می توانیم برای انجام کاری که می خواهیم یک بازه زمانی تنظیم کنیم.

در مثال زیر ابتدا پیام hello نمایش داده می شود و سپس بعد از 10 ثانیه پیام wellcome نمایش داده می شود.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: "hello"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({message: "wellcome"})
    }, 10000)
  }
  render() {
    return (
      <h1>the message is {this.state.message}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

برای انجام یک سری اعمال قبل از اینکه کامپوننت رندر شود می توانیم از متد ()componentWillMount استفاده کنیم. برای مثال می توانیم  state و props را در این متد مقداردهی کنیم. این  متد، در هربار رندر شدن کامپوننت توسط react فراخوانی می شود.

import React from 'react';
import classNames from 'classnames';

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mode: undefined } ;
  }

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }

  render() {
    return (
      <div className={ classNames('person', this.state.mode) }>
        { this.props.name } (age: { this.props.age })
      </div>
    );
  }
}

Person.defaultProps = { age: 'unknown' };

export default Person;

برای اینکار بصورت زیر عمل می کنیم:

class myForm extends React.Component {

constructor(props) {
    super(props);
    this.state = {selectedOption: ''};

handleOptionChange: function (changeEvent) {
  this.setState({
    selectedOption: changeEvent.target.value
  });
}
render: function(){
           return (
<form>
    <div className="radio">
      <label>
        <input type="radio" value="React" 
                      checked={this.state.selectedOption === 'React'} 
                      onChange={this.handleOptionChange} />
        React
      </label>
    </div>
    <div className="radio">
      <label>
        <input type="radio" value="JSF" 
                      checked={this.state.selectedOption === 'JSF'} 
                      onChange={this.handleOptionChange} />
        JSF
      </label>
    </div>
    <div className="radio">
      <label>
        <input type="radio" value="JavaScript" 
                      checked={this.state.selectedOption === 'JavaScript'} 
                      onChange={this.handleOptionChange} />
        JavaScript
      </label>
    </div>
  </form>
 )
}

برای  اینکار بصورت زیر عمل می کنیم:

import React, { Component } from 'react';
import Checkbox from './Checkbox';

const items = [
  'react',
  'jsf',
  'javaScript',
];

class Application extends Component {
  componentWillMount = () => {
    this.selectedCheckboxes = new Set();
  }

  toggleCheckbox = label => {
    if (this.selectedCheckboxes.has(label)) {
      this.selectedCheckboxes.delete(label);
    } else {
      this.selectedCheckboxes.add(label);
    }
  }

  
  createCheckbox = label => (
    <Checkbox
            label={label}
            handleCheckboxChange={this.toggleCheckbox}
            key={label}
        />
  )

  createCheckboxes = () => (
    items.map(this.createCheckbox)
  )

  render() {
    return (
      <div className="container">
        <div >
          <div >

            <form >
              {this.createCheckboxes()}

              <button className="btn btn-default" type="submit">Submit</button>
            </form>

          </div>
        </div>
      </div>
    );
  }
}

export default Application;

فرض کنیم میخواهیم زمانی که کاربر نام خود را وارد کرد، دکمه سابمیت فعال شود. برای اینکار چک می کنیم که اگر فیلد نام خالی نبود دکمه سابمیت فعال شود.

class myForm extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.onChange = this.onChange.bind(this);
  }


  onChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div >
        <input
          type="text"
          value={this.state.value}
          onChange={this.onChange}
        />
        <button
          disabled={!this.state.value}
        >
          submit
        </button>
      </div>
    );
  }
}

برای قرار دادن باکس متن در فرم خود در react ، از تگ Textarea استفاده می کنیم و مقداری که در این باکس وارد می شود در فیلد value قرار می گیرد.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      description: 'متن خود را وارد کنید'
    };
  }
  render() {
    return (
      <form>
      <textarea value={this.state.description} />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

در اینجا ما یک  مقدار اولیه به   description داده ایم و در باکس متنی پیغام “متن خود را وارد نمایید” نمایش داده می شود که میتوانیم مقدار اولیه نداشته باشیم و باکس متنی خالی باشد.

برای نشان دادن پیغام خطا می توانیم از alert استفاده کنیم اما می توانیم پیغام  خود را در state نیز ذخیره کرده  و نمایش دهیم.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
      errormessage: ''
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    let err = '';
    if (nam === "age") {
      if (val !="" && !Number(val)) {
        err = <strong>Your age must be a number</strong>;
      }
    }
    this.setState({errormessage: err});
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      {this.state.errormessage}
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

در  اینجا زمانیکه errormessage خالی نباشد پیغام مورد نظر را نمایش  می دهد.

می توانیم اینکار را در هنگام وارد کردن ورودی ها و هم در هنگام سابمیت دیتاها انجام دهیم.

در کد زیر در هنگام وارد کردن ورودی کنترل می کنیم که مقدار وارد شده عدد باشد.

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    if (nam === "age") {
      if (!Number(val)) {
        alert("Your age must be a number");
      }
    }
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

اگر  بخواهیم بعد از سابمیت ولیدیشن انجام شود باید در onSubmit اینکار در انجام دهیم.

برای اینکار می توانیم در فیلدهای ورودی خود ویژگی name را  اضافه کنیم و با این ویژگی به آن فیلد دسترسی پیدا کنیم:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      age: null,
    };
  }
  myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root')); 

در اینجا با دستورات event.target.name و event.target.value به فیلد و  مقدارش دسترسی پیدا می کنیم.همچنین در onChange می توانیم متد های مختلف قرار دهیم که در اینجا هر دو یک متد فراخوانی می  کنند.

برای اینکار باید یک if قراردهیم که بررسی کند زمانیکه کاربر  ورودی را وارد کرد المان HTML  مورد نظر ما را نمایش دهد:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    let header = '';
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }
    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

در اینجا المان  مورد نظر خود را در  متغیر header قرار دادیم.سپس با دستور if (this.state.username) بررسی کردیم که فیلد username وارد شده است یا خیر.اگر وارد شده باشد المان header نمایش داده می شود در غیر اینصورت چیزی نمایش داده نمی شود.

برای اینکار می توانیم از متد ()shouldComponentUpdate استفاده کنیم. این متد قبل از رندر کردن توسط react فراخوانی می شود و  یک مقدار بولین برمی گرداند که مشخص می کند که react کامپوننت را رندر  کند یا خیر.مقدار پیش فرض این متد true می باشد.

در مثال زیر مقدار این متد را false  می  کنیم:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {course: "react"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeCourse = () => {
    this.setState({course: "spring"});
  }
  render() {
    return (
      <div>
      <h1>My this course is {this.state.course}</h1>
      <button type="button" onClick={this.changeCourse }>Change course</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

در اینجا زمانیکه کاربر دکمه change course را کلیک کند مقدار course تغییر نخواهد کرد.

JSX کتابخانه ای از جاوااسکریپت است که برای نوشتن صفحات HTML در react استفاده می شود.استفاده از JSX در react الزامی نیست اما نوشتن کدهای HTML در react را آسانتر می  کند.با استفاده از JSX نیازی به createElement  و appendChild نداریم.

در مثال زیر یک تکه کد بدون JSX   داریم:

const myelement = React.createElement('h1', {}, 'WITHOUT JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

اما با JSX بصورت زیر می شود:

const myelement = <h1>WITH JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

همانطور که میبینیم با JSX کدنویسی ساده تر شده است.

react  برای  نمایش صفحات html   از تابع ReactDOM.render استفاده می کند.این تابع دو آرگومان دارد.کد html و المنت html.

در مثال زیر یک پاراگراف را در  المنت root نمایش می دهیم.

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

 
می توانیم کد HTML را در یک متغیر قرار دهیم:

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>SARA</td>
    </tr>
    <tr>
      <td>SUSAN</td>
    </tr>
  </table>
);

ReactDOM.render(myelement, document.getElementById('root'));

می توانیم برای المنتهای  خود id قرار دهیم:

<body>

  <header id="header"></header>

</body>

ReactDOM.render(<p>Hallo</p>, document.getElementById('header'));

در یک کامپوننت می توانیم هر چندتا که بخواهیم state تعریف کنیم ولی این state ها فقط در داخل خود کامپوننت قابل فراخوانی هستند.  state ها می توانند عدد رشته و حتی آرایه باشند.

در مثال زیر یک state تعریف کرده و مقدار آن را یک آرایه قرار داده ایم:

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

TableRow بصورت داینامیک هر آیتم از data را بر می گرداند و خط زیر

 {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}

یک تابع می باشد که هر بار یکی از آیتم های data را در فیلد person قرار می دهد.

در صورتیکه بخواهیم برای فونت و رنگ و سایر موارد style خودمان  را داشته باشیم بصورت زیر عمل می کنیم:

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

برای کار  کردن روی عناصر یک آرایه در react از تابع  ()map استفاده می کنیم. این متد کار مشابه loop ها  مانند حلقه for در جاوا و دیگر زبانها انجام می دهد.

در مثال زیر یک آرایه تعریف می کنیم و سپس عناصر آن را چاپ می کنیم.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

چند نمونه از عملیاتهایی که که میتوان روی یک جدول در react  انجام داد بصورت زیر می باشد:

نمایش دیتاهای جدول

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} />
}

export default App;

مرتب سازی

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} sortable />
}

export default App;

اگر بخواهیم ستونهایی از جدول مرتب نشوند

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} sortable nonSortCols={["name","lastname"]} />
}

export default App;

در اینجا مرتب سازی روی ستونهای name و lastname انجام نمی شود.

اگر بخواiهیم روی ستونها فیلتر قرار دهیم

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} filterable/>
}

export default App;

اگر بخواهیم بعضی ستونها فیلتر نشوند

import ReactFlexyTable from "react-flexy-table"

const App = ()=>{

return <ReactFlexyTable data={data} filterable nonFilterCols={["gender","email"]]/>
}
export default App;

اگر  بخواهیم ستونهای جدید به جدول خود اضافه کنیم

import ReactFlexyTable from "react-flexy-table"
import deleteIcon from "./icons/delete-button-svgrepo-com.svg"
import editIcon from "./icons/edit-svgrepo-com.svg"

const App = ()=>{
 const additionalCols = [{
    header: "Actions",
    td: (data) => {
      return <div>
        <img src={deleteIcon} width="30" height="20" onClick={() => alert("حذف ردیف شماره " + data.id)} /> // delete icon
        <img src={editIcon} width="30" height="20" onClick={() => alert("ویرایش ردیف شماره" + data.id)} /> // edit icon
      </div>
    }
  }]
  return <ReactFlexyTable data={data} additionalCols={additionalCols}/>
  }