在開發網頁時，我們經常會遇到一個錯誤：「一個元件正在改變一個未受控制的文本輸入，該輸入應該保持受控或未受控狀態，不應該互相轉換。」這個錯誤提示我們，在開發網頁時，應該選擇受控或未受控的輸入元素，並且在整個開發過程中保持一致。
目錄
什麼是受控和未受控的輸入元素？
受控的輸入元素是指，當用戶在輸入框中輸入文字時，該文字會被綁定到應用程序的狀態中，並且會被應用程序的更新時自動更新。受控的輸入元素可以使用React的state來實現，例如：
class MyForm extends React.Component {
state = {
inputValue: ''
};
handleChange = (event) => {
this.setState({
inputValue: event.target.value
});
};
render() {
return (
<input
type="text"
value={this.state.inputValue}
onChange={this.handleChange}
/>
);
}
}
未受控的輸入元素是指，當用戶在輸入框中輸入文字時，該文字不會被綁定到應用程序的狀態中，而是直接更新到DOM中，並且不會被應用程序的更新時自動更新。未受控的輸入元素可以使用React的ref來實現，例如：
class MyForm extends React.Component {
inputRef = React.createRef();
handleSubmit = (event) => {
event.preventDefault();
console.log(this.inputRef.current.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.inputRef} />
<button type="submit">Submit</button>
</form>
);
}
}
為什麼不能混用受控和未受控的輸入元素？
因為受控的輸入元素是由應用程序的狀態控制的，而未受控的輸入元素是由DOM控制的，如果混用受控和未受控的輸入元素，就會導致應用程序的狀態和DOM的狀態不一致，導致應用程序出現錯誤。
總結
在開發網頁時，我們應該選擇受控或未受控的輸入元素，並且在整個開發過程中保持一致，不能混用受控和未受控的輸入元素，否則會導致應用程序出現錯誤。
推薦閱讀文章
推薦閱讀文章
<a href="https://www.freecodecamp.org/news/controlled-vs-uncontrolled-inputs-in-react-a354715d1121/">Controlled vs Uncontrolled Inputs in React</a><br>
<a href="https://blog.bitsrc.io/understanding-controlled-and-uncontrolled-components-in-react-e2f4d2f7f2f2">Understanding Controlled and Uncontrolled Components in React</a><br>
<a href="https://www.telerik.com/blogs/react-controlled-vs-uncontrolled-components">React Controlled vs Uncontrolled Components</a><br>
<a href="https://www.codementor.io/@blizzerand/controlled-and-uncontrolled-form-components-in-react-j2x5cjq6z">Controlled and Uncontrolled Form Components in React</a><br>
<a href="https://www.digitalocean.com/community/tutorials/react-controlled-uncontrolled-components">React Controlled and Uncontrolled Components</a