国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

characters

在大多數(shù)情況下，我們建議使用受控組件來實現(xiàn)表單。在受控組件中，表單數(shù)據由React組件處理。另一種選擇是不受控制的組件，其中表單數(shù)據由DOM本身處理。

要編寫一個不受控制的組件，而不是為每個狀態(tài)更新編寫一個事件處理程序，可以使用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代碼有時更容易。如果你想快速和骯臟，它也可以少一點代碼。否則，您通常應該使用受控組件。

如果仍然不清楚您應該在特定情況下使用哪種類型的組件，那么您可能會發(fā)現(xiàn)這篇關于受控與非受控輸入的文章會有所幫助。

默認值

在React渲染生命周期中，value表單元素上的屬性將覆蓋DOM中的值。對于不受控制的組件，您通常希望React指定初始值，但讓后續(xù)更新不受控制。要處理這種情況，您可以指定一個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。

Previous article： Next article：