Работа с элементами форм

Последнее обновление: 21.03.2025

Управление флажками (checkbox)

Элемент ввода <input type="checkbox"/> представляет флажок (чекбокс), который может находиться в отмеченном или неотмеченном состоянии. Для управления состоянием флажка применяется атрибут checked. На уровне JavaScript мы можем привязать этот атрибут к булевой переменной. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        function Terms() {
            const [isChecked, setIsChecked] = React.useState(false);
            const handleChange = () => { setIsChecked((prev) => !prev); };

            return (
                <>
                    <label>Принять условия:</label>
                    <input type="checkbox" checked={isChecked} onChange={handleChange} />
                    <p>{isChecked? "Условия приняты" : "Необходимо принять условия"}</p>
                </>
            );

            }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Terms />
        );
    </script>
</body>
</html>

Здесь компонент Terms определеяет состояние isChecked и функцию setIsChecked для его обновления. По умолчанию isChecked равно false:

const [isChecked, setIsChecked] = React.useState(false);

В коде элемента ввода к isChecked привязан одноименный атрибут, а при изменении ввода срабатывает обработчик handleChange, который изменяет состояние:

<input type="checkbox" checked={isChecked} onChange={handleChange} />
Checkbox в React

Аналогичный пример на классах-компонентах:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        class Terms extends React.Component {
            constructor(props) {
                super(props);
                this.state = {isChecked: false};  // состояние
            }
            handleChange = () => { this.setState({isChecked: !this.state.isChecked}); };

            render() {
                return (
                    <>
                        <label>Принять условия:</label>
                        <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChange} />
                        <p>{this.state.isChecked? "Условия приняты" : "Необходимо принять условия"}</p>
                    </>
                );
            }
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Terms />
        );
    </script>
</body>
</html>

Радиокнопки (radibutton)

Элементы ввода <input type="radio"/> образуют группу, одномоментно из которой можно выбрать только одну кнопку. Для управления состоянием флажка применяется атрибут checked. На уровне JavaScript мы можем привязать этот атрибут к булевой переменной. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        function Language() {

            const [selectedOption, setSelectedOption] = React.useState("");

            const handleChange = (e) => setSelectedOption(e.target.value);

            return (
                <div>
                    <input type="radio" value="JavaScript" checked={selectedOption === "JavaScript"} onChange={handleChange}/>
                    JavaScript<br/>
                    <input type="radio" value="TypeScript" checked={selectedOption === "TypeScript"} onChange={handleChange}/>
                    TypeScript<br/>
                    <input type="radio" value="Python" checked={selectedOption === "Python"} onChange={handleChange}/>
                    Python<br/>
                    <p>Selected Option: {selectedOption}</p>
                </div>
            );
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Language />
        );
    </script>
</body>
</html>

Итак, здесь определен компонент Language, предназначенный для условного выбора языка программирования. Вначале для компонента определяется состояние:

const [selectedOption, setSelectedOption] = React.useState("");

Состояние представлено переменной selectedOption, которая по умолчанию равна пустой строке.

Функция-обработчик события handleChange изменяет это состояние:

const handleChange = (e) => setSelectedOption(e.target.value);

В JSX-коде компонента определены три радиокнопки. Например, возьмем первую радиокнопку:

<input type="radio" value="JavaScript" checked={selectedOption === "JavaScript"} onChange={handleChange}/>

Атрибут value у поля ввода собственно представляет то значение, которое будет передаваться состоянию selectedOption. Атрибут checked на основании текущего состояния устанавливает, выбрана ли текущая радиокнопка. Таким образом, пользователь одномоментно сможет выбрать только одну радиокнопку, а значение ее атрибута value будет передано в состояние компонента:

радиокнопка radiobutton в React

Аналогичный пример на компонентах-классах:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        class Language extends React.Component {
            constructor(props) {
                super(props);
                this.state = {selectedOption: ""};  // состояние
            }
            handleChange = (e) => this.setState({selectedOption:e.target.value});

            render() {
                return (
                    <div>
                    <input type="radio" value="JavaScript" checked={this.state.selectedOption === "JavaScript"} onChange={this.handleChange}/>
                    JavaScript<br/>
                    <input type="radio" value="TypeScript" checked={this.state.selectedOption === "TypeScript"} onChange={this.handleChange}/>
                    TypeScript<br/>
                    <input type="radio" value="Python" checked={this.state.selectedOption === "Python"} onChange={this.handleChange}/>
                    Python<br/>
                    <p>Selected Option: {this.state.selectedOption}</p>
                </div>
                );
            }
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Language />
        );
    </script>
</body>
</html>

Выпадающий список select

Выпадающий список <select> представляет набор вариантов, из которых мы можем выбрать один. В каком-то смысле это похоже на пример с радиокнопками:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        function Language() {

            const [selectedOption, setSelectedOption] = React.useState("");

            const handleChange = (e) => setSelectedOption(e.target.value);

            return (
                <div>
                    <select value={selectedOption} onChange={handleChange}>
                        <option value="">Выберите язык</option>
                        <option value="JavaScript">JavaScript</option>
                        <option value="TypeScript">TypeScript</option>
                        <option value="Python">Python</option>
                    </select>
                    <p>Выбранный язык: {selectedOption==="" ? "Не выбрано" : selectedOption}</p>
                </div>
            );
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Language />
        );
    </script>
</body>
</html>

Здесь также определен компонент Language с тем же состоянием

const [selectedOption, setSelectedOption] = React.useState("");

В коде JSX компонента определен элемент <select>:

<select value={selectedOption} onChange={handleChange}>
    <option value="">Выберите язык</option>
    <option value="JavaScript">JavaScript</option>
    <option value="TypeScript">TypeScript</option>
    <option value="Python">Python</option>
</select>

Атрибут value (выбранный элемент) списка привязан к состоянию selectedOption. При изменении выбора срабатывает функция handleChange, которая получает выбранный элемент и изменяет состояние.

выпадающий список select в React

Аналогичный пример на классах-компонентах:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel" data-type="module">
        import React from "https://esm.sh/react@19?dev";
        import ReactDOM from "https://esm.sh/react-dom@19/client?dev";
        
        class Language extends React.Component {
            constructor(props) {
                super(props);
                this.state = {selectedOption: ""};  // состояние
            }
            handleChange = (e) => this.setState({selectedOption:e.target.value});

            render() {
                return (
                    <div>
                        <select value={this.state.selectedOption} onChange={this.handleChange}>
                            <option value="">Выберите язык</option>
                            <option value="JavaScript">JavaScript</option>
                            <option value="TypeScript">TypeScript</option>
                            <option value="Python">Python</option>
                        </select>
                        <p>Выбранный язык: {this.state.selectedOption==="" ? "Не выбрано" : this.state.selectedOption}</p>
                    </div>
                );
            }
        }
        ReactDOM.createRoot(
            document.getElementById("app")
        )
        .render(
            <Language />
        );
    </script>
</body>
</html>

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм