React.js在使用非状态变量Getting error作为组件时正在更改要控制的文本类型的不受控制的输入

Question

我正在尝试使用非状态变量'newItem'来保存输入值

import React, { Component } from 'react';
class List extends Component {
constructor() {
super();
this.state = { items: [1, 2] };
this.newItem = undefined;
}
changeNewItem = e => {
this.newItem = e.target.value;
console.log(this.newItem);
};
addItem = e => {
if (e.keyCode !== 13) return;
var tmp_list = this.state.items;
tmp_list.push(this.newItem);
this.setState({ items: tmp_list }, () => {
this.newItem = '';
});
};
render() {
return (
<div>
<ul>
{this.state.items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<input
type="text"
placeholder="add item"
value={this.newItem}
onChange={this.changeNewItem}
onKeyUp={this.addItem}
/>
</div>
);
}
}
export default List;

当我按下文本框中的回车键时，项目被添加到数组中，但出现以下错误

index.js:1452警告：组件正在更改要控制的文本类型的未控制输入。输入元件不应从非受控切换到受控(反之亦然(。决定在组件的使用寿命内使用受控或非受控输入元件。更多信息：输入中(List.js:29(在div中(List.js:23(在列表中(位于App.js:9(应用程序中(src/index.js:8(

Answer 1

本例中的问题是输入元素的初始值未定义，然后使用变量this.newItem控制它。因此，您会收到试图将不受控制的输入更改为受控制的警告。

将值初始化为empty string，而不是undefined。此外，如果您希望输入组件更改值，请使用状态而不是类变量

import React, { Component } from 'react';
class List extends Component {
constructor() {
super();
this.state = { items: [1, 2], newItem: '' };
}
changeNewItem = e => {
this.setState({newItem: e.target.value})
};
addItem = e => {
if (e.keyCode !== 13) return;
var tmp_list = this.state.items;
tmp_list.push(this.state.newItem);
this.setState({ items: tmp_list }, () => {
this.state.newItem = '';
});
};
render() {
return (
<div>
<ul>
{this.state.items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<input
type="text"
placeholder="add item"
value={this.state.newItem}
onChange={this.changeNewItem}
onKeyUp={this.addItem}
/>
</div>
);
}
}
export default List;

Answer 2

更改为不受控制的输入并使用React.createRef((，由Comment 建议

import React, { Component } from 'react';
class List extends Component {
newItem;
constructor() {
super();
this.state = { items: [1, 2] };
this.input = React.createRef();
}
changeNewItem = e => {
this.newItem = e.target.value;
console.log(this.newItem);
};
addItem = e => {
if (e.keyCode !== 13 || !this.newItem) return;
var new_list = this.state.items.concat(this.newItem);
this.setState({ items: new_list }, () => {
this.newItem = '';
this.input.current.value = '';
});
};
render() {
return (
<div>
<ul>
{this.state.items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<input
type="text"
placeholder="add item"
ref={this.input}
onChange={this.changeNewItem}
onKeyUp={this.addItem}
/>
</div>
);
}
}
export default List;