reactjs - React-Mobx 警告:组件正在更改不受控制的输入
问题描述
我使用 React + TypeScript + Mobx。我用输入制作了表单,一切正常,但浏览器出错。我究竟做错了什么?
警告:组件正在更改要控制的文本类型的不受控输入。输入元素不应从不受控切换到受控(反之亦然)。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。
形式:
@observer
export class SearchForm extends React.Component {
@observable
private _inputText: string;
submitForm = (event: SyntheticEvent<HTMLFormElement>) => {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.submitForm}>
<InputField
value={this._inputText}
onChange={action((value: string) => this._inputText = value)}
/>
</form>
);}}
输入:
interface Props {
value: string;
onChange: (inputText: string) => void;
}
@observer
export class InputField extends React.Component<Props> {
onChange = (event: SyntheticEvent<HTMLInputElement>) => {
this.props.onChange(event.currentTarget.value);
}
render() {
return (
<div>
<input
type="text"
value={this.props.value}
onChange={this.onChange}
/>
</div>
);
}
}
解决方案
React 的输入是根据输入上是否存在 value 属性来控制/不受控制的。您正在传递 value 道具,但_inputText
以undefined
. 并且当输入的值开始未定义时,React 将始终以不受控制的模式启动输入。
输入输入后,_inputText
不再是未定义的,并且输入翻转到受控模式,您会收到警告。
对于您的情况,解决方法很简单;只需初始化_inputText
为空字符串:
@observable
private _inputText: string = '';
您还可以调整您<InputField />
的强制未定义值道具为空字符串:
render() {
return (
<div>
<input
type="text"
value={this.props.value == null ? '' : this.props.value}
onChange={this.onChange}
/>
</div>
);
}
推荐阅读
- python - 我在尝试在python中添加两个整数值时遇到这个错误“只能将str(不是“int”)连接到str”
- python - 时尚 mnist 的 Softmax 回归
- c++ - '执行代码时参数 1 从 'int' 到 'const key_type&' 的未知转换错误'
- arrays - 通过重复删除第一个和中间、第一个和最后一个或中间和最后一个元素来清空数组的最小成本
- django - 管理面板中的模型条件
- azure-devops - Azure DevOps YAML - 根据当前模板参数将参数传递给子模板
- javascript - 如何在反应原生元素按钮组件中对禁用按钮按下应用操作?
- ios - 需要在应用程序购买中创建多个产品 ID 并在 Apple 中提供多个时间银行信息?
- php - 仅 Chrome 浏览器中 Paytm Gateway PHP 中的校验和不匹配错误
- python - Python Numpy arctan2 星号和 .T 的含义