React 是一個用於構建用戶界面的 JavaScript 庫，它可以讓開發者更輕鬆地構建高質量的用戶界面。然而，React 也會發出一些警告，其中一個是“Error：A component is changing an uncontrolled input of type checkbox to be controlled.”。這個錯誤提示表明，React 正在嘗試控制一個未被控制的輸入，這可能會導致嚴重的問題。
目錄
什麼是 React 中的未控制輸入？
React 中的未控制輸入是指沒有被 React 控制的輸入，這些輸入可能是 HTML 表單元素，如文本框、下拉列表、多選框或單選框。這些輸入的值可以被用戶自由更改，而 React 不會對其進行任何控制。
為什麼 React 會嘗試控制未控制的輸入？
React 會嘗試控制未控制的輸入，是因為它想要確保用戶輸入的值是正確的。例如，如果用戶輸入的值不正確，React 可以檢查它並拒絕接受它。
如何解決 React 中的未控制輸入問題？
要解決 React 中的未控制輸入問題，可以使用 React 的 state 來控制輸入的值。例如，可以使用以下程式碼來控制一個多選框：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedValues: []
};
}
handleChange = (event) => {
const { checkedValues } = this.state;
if (event.target.checked) {
checkedValues.push(event.target.value);
} else {
const index = checkedValues.indexOf(event.target.value);
checkedValues.splice(index, 1);
}
this.setState({ checkedValues });
}
render() {
const { checkedValues } = this.state;
return (
<div>
<input
type="checkbox"
value="value1"
checked={checkedValues.includes('value1')}
onChange={this.handleChange}
/>
<input
type="checkbox"
value="value2"
checked={checkedValues.includes('value2')}
onChange={this.handleChange}
/>
</div>
);
}
}
通過使用 React 的 state 來控制輸入的值，可以確保用戶輸入的值是正確的，並且可以避免出現“Error：A component is changing an uncontrolled input of type checkbox to be controlled.”的錯誤提示。
總結來說，React 中的“Error：A component is changing an uncontrolled input of type checkbox to be controlled.”錯誤提示表明，React 正在嘗試控制一個未被控制的輸入，這可能會導致嚴重的問題。要解決這個問題，可以使用 React 的 state 來控制輸入的值，以確保用戶輸入的值是正確的。
推薦閱讀文章
React Controlled vs Uncontrolled Inputs and How to Choose
Howdu1084lyn”>Controlled and Uncontrolled Form Components in React.js
Understanding Controlled and Uncontrolled Form Components in React
React Controlled and Uncontrolled Components</a