英文:
Why uncontrolled input elements lose inputs during reconciliation?
问题
以下是显示一个用于包装内容的复选框、一个文本输入字段和一个带有增加按钮的计数器的示例代码：
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
wrapContent: false
}
}
handleAdd = () => {
this.setState({ counter: this.state.counter + 1 });
}
toggleWrap = () => {
this.setState(state => state.wrapContent = !state.wrapContent);
}
wrapContent(content) {
return this.state.wrapContent ?
<div className="bg-secondary p-2">
<div className="bg-light">{content}</div>
</div>
: content;
}
render() {
return this.wrapContent(
<React.Fragment>
<input type="checkbox" checked={this.state.wrapContent} onChange={this.toggleWrap} />
<input className="form-control"/> {/* <--------value disappear after toggling */}
<DisplayCounter counter={this.state.counter} />
<div className="text-center">
<button className="btn btn-primary" onClick={this.handleAdd}>Increment</button>
</div>
</React.Fragment>
);
}
}
class DisplayCounter extends Component {
render() {
return <React.Fragment><div>
<h2>{this.props.counter}</h2>
</div></React.Fragment>
}
}
如果我在输入框中输入一些文本，点击几次“Add”按钮，然后切换复选框，输入框的值会消失，而DisplayCounter的值仍然存在。
我不明白的是为什么输入框会丢失其值，难道不是 React 使用虚拟 DOM 来最小化 DOM 更新的数量吗？那么如果虚拟 DOM 对DisplayCounter有效，为什么它不适用于像输入框这样的不受控制的表单元素？
为什么不受控制的输入元素会失去其输入？
英文:
Below is the sample code that display a checkbox to wrap content, an text input field, and a counter with a button to increment
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
wrapContent: false
}
}
handleAdd = () => {
this.setState({ counter: this.state.counter + 1 });
}
toggleWrap = () => {
this.setState(state => state.wrapContent = !state.wrapContent);
}
wrapContent(content) {
return this.state.wrapContent ?
<div className="bg-secondary p-2">
<div className="bg-light">{content}</div>
</div>
: content;
}
render() {
return this.wrapContent(
<React.Fragment>
<input type="checkbox" checked={this.state.wrapContent} onChange={this.toggleWrap} />
<input className="form-control"/> {/* <--------value disappear after toggling */}
<DisplayCounter counter={this.state.counter} />
<div className="text-center">
<button className="btn btn-primary" onClick={this.handleAdd}>Increment</button>
</div>
</React.Fragment>
);
}
}
class DisplayCounter extends Component {
render() {
return <React.Fragment><div>
<h2>{this.props.counter}</h2>
</div></React.Fragment>
}
}
If I enter some text in the input, click Add button a couple of time and then toggle the checkbox, the value of the input is gone while the value of DisplayCounter still persists.
What I don't understand is why the input lose its value, isn't that react use virtual dom to minimize the number of DOM updates, so if virtual dom works for DisplayCounter, why it doesn't work for the uncontrolled form element like input?
understand why uncontrolled input elements lose its input?
答案1
得分: 0
输入中有一个不受控制的输入。它保留了其中的数据。当它卸载时，数据会随之被清除。下次它出现时，它将是一个全新的输入。
DisplayCounter 保持其值，因为它是一个受控组件，您将其值保存在状态 this.state.counter 中。
英文:
The input there is an uncontrolled input. It keeps the data in itself. When it unmounts, the data gets erased together with him. The next time it appears, it is a fresh new input.
DisplayCounter keeps its value, because it is a controlled component, you keep its value in state this.state.counter
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论