Languages
[Edit]
PL

React - trójstanowe pole wyboru (checkbox)

6 points
Created by:
Dirask JS Member
3460

W tym kr├│tkim artykule chcieliby┼Ťmy pokaza─ç, jak utworzy─ç tr├│jstanowe pole wyboru w Reakcie - trzy-stanowy przycisk checkbox.

W tym celu tworzony jest element input typu checkbox, kt├│ry u┼╝ywa wbudowanej w┼éasno┼Ťci indeterminate. Tr├│jstanowe pole wyboru rozumiemy jako pole, kt├│re jest w stanie uzyska─ç trzy stany: true, false i null. null jest warto┼Ťci─Ö nieustawion─ů.

Tr├│jstanowe pole wyboru w React
Tr├│jstanowe pole wyboru w React

Praktyczny przykład:

// ONLINE-RUNNER:browser;

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

const updateInput = (ref, checked) => {
  	const input = ref.current;
    if (input) {
        input.checked = checked;
        input.indeterminate = checked == null;
    }
};

const ThreeStateCheckbox = ({name, checked, onChange}) => {
    const inputRef = React.useRef(null);
    const checkedRef = React.useRef(checked);
    React.useEffect(() => {
        checkedRef.current = checked;
        updateInput(inputRef, checked);
    }, [checked]);
    const handleClick = () => {
        switch (checkedRef.current) {
            case true:
                checkedRef.current = false;
                break;
            case false:
                checkedRef.current = null;
                break;
            default: // null
                checkedRef.current = true;
                break;
        }
        updateInput(inputRef, checkedRef.current);
        if (onChange) {
          	onChange(checkedRef.current);
        }
    };
    return (
      <input ref={inputRef} type="checkbox" name={name} onClick={handleClick} />
    );
};

const App = () => {
    const [checked, setChecked] = React.useState(null);
    const handleChange = (checked) => {
      	console.log(`checked: ${checked}`);
    };
    return (
      <ThreeStateCheckbox checked={checked} onChange={handleChange} />
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

ReactJS (PL)

React - trójstanowe pole wyboru (checkbox)
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