代码之家 › 专栏 › 技术社区 › Dipak

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

warnings reactjs javascript

Dipak · 技术社区 · 7 年前

当react说 输入字段是不受控制的字段` 是吗?它将如何以不受控制的输入字段的形式影响Web页面。在更改字段值时,我可以看到控制台中的警告消息,除了应用程序上还有其他问题。

2 回复 | 直到 7 年前

T.J. Crowder 7 年前

不受控制的输入只是一个不使用react来控制输入值的输入(例如,不使用 value={this.state.value} 或者类似);相反,您可以使用ref并直接从dom获取值。这意味着DOM包含了该状态的“真相来源”,而不是包含它的真相来源的反应模型。

反应文档链接:

Chirag Ravindra 7 年前

从我有限的理解,一个“受控”的输入是当你使用反应状态来“控制”输入的值(通常是通过将值属性赋值给状态变量,并通过更新状态来处理输入的改变)。一个“不受控制”的输入是指该值不是由状态决定的,而是独立运行的。这些输入及其值通常使用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