Question

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

Answer 1

不受控制的输入就是您不使用React来控制输入值的输入（例如，您不使用value={this.state.value}或类似的输入）；相反，您可以使用ref并直接从DOM获取值。这意味着DOM包含该状态的“真相源”，而不是您的React模型包含该状态的真相源。

反应文档链接：

Answer 2

据我有限的理解，“受控”输入是指您使用反应状态来“控制”输入的值（通常是通过将value属性分配给状态变量并通过更新状态来处理输入的更改）。 “不受控制的”输入是值不受状态决定并且独立运行的输入。通常使用引用访问这些输入及其值。

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

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应用程序中不受控制的输入字段

2 个答案: