受控組件和非受控組件，強力一波

FrancisSoung 發(fā)布于2019-08-26 18:27 / 3392人閱讀

摘要：受控組件其值由控制的輸入表單元素稱為受控組件。如果讓表單數(shù)據(jù)由處理時，替代方案為使用非受控組件。使用非受控組件時，通常你希望可以為其指定初始值，但不再控制后續(xù)更新。

受控組件

其值由React控制的輸入表單元素稱為“受控組件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      
        
          Name:
          
        
        
      
    );
  }
}

通過綁定onChange實現(xiàn)了類似雙向綁定
理解：首先input的顯示的值受value={this.state.value}
控制，輸入時通過onChange函數(shù)回調(diào)，將新接受的值設(shè)置回this.state.value,從而再作用到組件的顯示，形成了雙向綁定的感覺

非受控組件

在大多數(shù)情況下，我們推薦使用 受控組件 來實現(xiàn)表單。 在受控組件中，表單數(shù)據(jù)由 React 組件處理。如果讓表單數(shù)據(jù)由 DOM 處理時，替代方案為使用非受控組件。

默認值 defaultValue

在 React 的生命周期中，表單元素上的 value 屬性將會覆蓋 DOM 中的值。
使用非受控組件時，通常你希望 React 可以為其指定初始值，但不再控制后續(xù)更新。要解決這個問題，你可以指定一個 defaultValue 屬性而不是 value。

render() {
  return (
    
      
        Name:
         this.input = input} />
      
      
    
  );
}

文件輸入標簽

在React中，始終是一個不受控制的組件，因為它的值只能由用戶設(shè)置，而不是以編程方式設(shè)置。

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.files[0].name}`
    );
  }

  render() {
    return (
      
        
          Upload file:
           {
              this.fileInput = input;
            }}

          />

        
        

        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

受控和非受控你該怎么選

原文
Conclusion
Both the controlled and uncontrolled form fields have their merit. Evaluate your specific situation and pick the approach — what works for you is good enough.
If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine. You don’t have to listen to what the various articles are saying is “bad.”
Also, this is not an once-and-for-all decision: you can always migrate to controlled inputs. Going from uncontrolled to controlled inputs is not hard.
兩種方法都有各自的優(yōu)點，根據(jù)具體使用場景評估一下，從中選擇一種更適合的方式，如果表單在UI反饋方面非常簡單，那么使用ref的不受控組件就完全沒有問題。你不必聽各種各樣的文章說什么是“壞的”，同樣也不是說不能更改，畢竟總是可以轉(zhuǎn)換到可控制的，使用受控的話也不是很費勁。