什么是 React 应用程序中不受控制的输入字段

Question

当 React 说 输入字段是不受控制的字段时，这是什么意思`？它将如何影响具有不受控制的输入字段形式的网页。我可以在更改字段值时在控制台中看到一条警告消息，除此之外，应用程序还会出现什么其他问题？

Answer 1

一个不受控制的输入就是你没有使用 React 来控制输入值的输入（例如，你不使用 value={this.state.value} 或类似的）；相反，您使用 ref 并直接从 DOM 获取值。这意味着 DOM 包含那个状态的 "source of truth"，而不是包含它真实来源的 React 模型。

React 文档链接：

Answer 2

根据我有限的理解，"Controlled" 输入是指当您对 'control' 输入的值使用反应状态时（通常通过将值属性分配给状态变量并处理输入的更改更新状态）。 "uncontrolled" 输入是一种值不由状态确定且独立运行的输入。这些输入及其值通常使用 Refs 访问。

也许此示例有助于更好地阐明问题。这是一个简单的应用程序，具有一个受控和一个非受控输入。

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);

参考文献：

Controlled Components

Uncontrolled Components

什么是 React 应用程序中不受控制的输入字段

What is uncontrolled input field in a React app

javascript

warnings

reactjs