Uncontrolled Components - [ React中文开发手册 ] - 在线原生手册

目录搜索

Reference Reference: Component Reference: React Advanced Guides Quick Start DOM Elements Glossary of React Terms JavaScript Environment Requirements props React Top-Level API React.Component ReactDOM ReactDOMServer Shallow Renderer state SyntheticEvent Test Renderer Test Utilities Component React API Accessibility Context Error Boundaries Higher-Order Components Integrating with Other Libraries JSX In Depth Optimizing Performance Portals React Without ES6 React Without JSX Reconciliation Refs and the DOM Static Type Checking Typechecking With PropTypes Uncontrolled Components Web Components Components and Props Composition vs Inheritance Conditional Rendering Forms Handling Events Installation Introducing JSX Lifting State Up Lists and Keys Rendering Elements State and Lifecycle Thinking in React

文字

在大多数情况下，我们建议使用受控组件来实现表单。在受控组件中，表单数据由React组件处理。另一种选择是不受控制的组件，其中表单数据由DOM本身处理。

要编写一个不受控制的组件，而不是为每个状态更新编写一个事件处理程序，可以使用ref从DOM获取表单值。

例如，该代码在不受控制的组件中接受单个名称：

class NameForm extends React.Component {  
    constructor(props) {    
        super(props);    
        this.handleSubmit = this.handleSubmit.bind(this);  
    }  
    handleSubmit(event) {    
        alert('A name was submitted: ' + this.input.value);
        event.preventDefault();  
    }  
    render() {    
        return (      
            <form onSubmit={this.handleSubmit}>        
            <label>Name:<input type="text" ref={(input) => this.input = input} /></label>
            <input type="submit" value="Submit" /></form>    );  }
            }

在CodePen上试用它。

由于不受控制的组件在DOM中保留了真相源，因此在使用不受控制的组件时，集成React和非React代码有时更容易。如果你想快速和肮脏，它也可以少一点代码。否则，您通常应该使用受控组件。

如果仍然不清楚您应该在特定情况下使用哪种类型的组件，那么您可能会发现这篇关于受控与非受控输入的文章会有所帮助。

默认值

在React渲染生命周期中，value表单元素上的属性将覆盖DOM中的值。对于不受控制的组件，您通常希望React指定初始值，但让后续更新不受控制。要处理这种情况，您可以指定一个defaultValue属性而不是value。

render() {  
    return (    
        <form onSubmit={this.handleSubmit}>
        <label>Name:<input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
        </label>      
        <input type="submit" value="Submit" /></form>  );
        }

同样，<input type="checkbox">和<input type="radio">支持defaultChecked，并<select>与<textarea>支持defaultValue。