Что такое неконтролируемое поле ввода в приложении React?

Question

Что это означает, когда React говорит, что поле ввода - неконтролируемое поле` ? Как это повлияет на веб-страницу с помощью формы неконтролируемых полей ввода. При изменении значений поля я вижу предупреждающее сообщение в консоли, кроме того, какие еще проблемы могут возникнуть в приложении?

Answer 1

По моему ограниченному пониманию, «контролируемый» вход - это когда вы используете состояние реакции для «управления» значением входа (обычно путем присвоения атрибута значения переменной состояния и обработки изменений для ввода путем обновления состояния). «Неконтролируемый» вход - это тот, где значение не определяется состоянием и работает независимо. К этим входам и их значениям обычно обращаются, используя ссылки.

Возможно, этот образец поможет прояснить ситуацию лучше. Это простое приложение, которое имеет один контролируемый и один неуправляемый вход.

Codesandbox Link

Пример кода:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    value: ""
    };
    this.inputRef = React.createRef();
}
handleChange = e => {
    this.setState({
    value: e.target.value
    });
};
handleRefChange = e => {
    const el = this.inputRef.current;
    // Handle value here as needed
    console.log(el.value);
};
render() {
    return (
    <div className="App">
        <h1>Controlled vs Uncontrolled Inputs</h1>
        <h2>Controlled</h2>
        <label for="controlled">Controlled</label>
        <input
        id="controlled"
        onChange={this.handleChange}
        value={this.state.value}
        type="text"
        />
        <p> Value: {this.state.value} </p>

        <h2>Uncontrolled</h2>
        <label for="uncontrolled">Controlled</label>
        <input
        id="uncontrolled"
        onChange={this.handleRefChange}
        ref={this.inputRef}
        type="text"
        />
    </div>
    );
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ссылки:

Контролируемые компоненты

Неуправляемые компоненты

Answer 2

Неконтролируемый вход - это просто тот, где вы не используете React для управления значением входа (например, вы не используете value={this.state.value} или подобное);вместо этого вы используете ссылку и получаете значение непосредственно из DOM.Это означает, что DOM содержит «источник правды» для этого элемента состояния, а не вашу модель React, содержащую источник правды для него.

Ссылки на документацию React:

• Неконтролируемые компоненты
• Формы (включая контролируемые компоненты)