Languages
[Edit]
PL

React - edytowalna komórka tabeli

0 points
Created by:
Dirask JS Member
3460

W tym kr├│tkim artykule chcieliby┼Ťmy pokaza─ç, jak w technologii┬áReact┬ástworzy─ç kom├│rki, kt├│re mo┼╝na edytowa─ç po klikni─Öciu na nie.┬á

Edytowalne kom├│rki tabeli w Reakcie.
Edytowalne kom├│rki tabeli w Reakcie.

Uwagi:

  • Przejd┼║ do┬átego┬áartyku┼éu (ang), aby dowiedzie─ç si─Ö, jak zmieni─ç stan props├│w,
  • Przejd┼║ do┬átego┬áartyku┼éu, aby zobaczy─ç jak z edytowalnych kom├│rek stworzy─ç┬áedytowaln─ů┬átabel─Ö.

Szybkie rozwi─ůzanie:┬á┬á

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const itemStyle = {
  	padding: '2px',
	border: '1px solid silver',
  	fontFamily: 'Arial',
  	fontSize: '13px',
  	display: 'flex'
};

const textStyle = {
  	...itemStyle,
  	padding: '5px 4px',
};

const inputStyle = {
  	padding: '0',
	flex: '1',
  	fontFamily: 'Arial',
  	fontSize: '13px'
};

const buttonStyle = {
  	flex: 'none'
};

const Cell = ({value, onChange}) => {
  	const [mode, setMode] = React.useState('read');
  	const [text, setText] = React.useState(value ?? '');
    React.useEffect(() => {
    	setText(value);
  	}, [value]); // <--- gdy zmieniana jest warto┼Ť─ç value, zmienia si─Ö r├│wnie┼╝ stan 
	if (mode === 'edit') {
        const handleInputChange = (e) => {
    		setText(e.target.value);
        };
        const handleSaveClick = () => {
            setMode('read');
          	if (onChange) {
          		onChange(text);
            }
        };
        return (
          <div style={itemStyle}>
            <input type="text" value={text}
                   style={inputStyle} onChange={handleInputChange} />
            <button style={buttonStyle} onClick={handleSaveClick}>Ok</button>
          </div>
        );
    }
  	if (mode === 'read') {
        const handleEditClick = () => {
            setMode('edit');
        };
        return (
          <div style={textStyle} onClick={handleEditClick}>{text}</div>
        );
    }
  	return null;
};

// Przykład:

const App = () => {
  const [values, setValues] = React.useState(['Tekst 1', 'Tekst 2', 'Tekst 2']);
  console.log(...values);
  return (
    <table style={{width: '250px'}}>
      <tbody>
      {values.map((value, index) => {
        const handleChange = value => {
            // metoda map() jest u┼╝ywana do aktualizacji wskazanej warto┼Ťci z kopiowaniem stanu
        	setValues(values.map((v, i) => index === i ? value : v));
        };
		return (
          <tr key={index}>
            <td><Cell value={value} onChange={handleChange} /></td>
          </tr>
        );
      })}
      </tbody>
    </table>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join