时间戳

首页 > 解决方案 > 什么是 React 应用程序中不受控制的输入字段

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

问题描述

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

标签： javascriptreactjswarnings

解决方案

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

也许这个示例将有助于更好地澄清事情。这是一个简单的应用程序，它有一个受控输入和一个不受控输入。

代码沙盒链接

示例代码：

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

参考：

受控组件

不受控制的组件

推荐阅读