Reactjs 初始化React中的空受控数字字段

我有一个问题，有一个受控的数字输入，我想在第一次加载时为空

组件代码如下所示（这是一个非常简单的示例，实际表单有更多的字段和一些显示结构）

interface-props{
初始项：项目；
}
界面状态{
项目：项目；
}
导出类表单扩展了React.Component{
国家：国家；
构造器（道具：道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
此.state={
项目：cloneDeep（道具初始项目）
};
}
render（）{
const item=this.state.item；
返回(
);
}
handleChange（）{
//字段更改处理代码，包括更新状态
}
}

在item上，rate字段的类型为number

我希望在首次加载表单时，给定字段为空。但是，如果item.rate开始时为null，则最初会出现以下控制台错误：

警告：

value

prop on

input

不应为空。考虑使用空字符串来清除未受控制的组件的组件或代码>未定义的< /代码>。 在字段中键入一个数字后，我得到控制台错误

警告：表单正在更改要控制的类型编号的非受控输入。输入元件不应从非受控切换到受控（反之亦然）。在组件的使用寿命内，决定使用受控或非受控输入元件

使用undefined最初会消除第一个警告，但在输入值时仍会出现第二个警告

对于类似的文本类型字段（typescript中的字符串），以空字符串开头会给出正确的结果，但我不能在这里这样做，因为item.rate是number类型

---

有没有办法解决这个问题，以便在用户输入某个内容之前，该字段将是空的，而不会出现任何控制台错误？

您能试试value={item.rate | |'''}吗？确实有效！（现在我觉得很傻-我没有想到把它放在不是类型的地方，而不是放在项目上）尽管为了便于以后查看，如果您可能将0作为item.rate的值传递，并且希望在这种情况下0出现在字段中（因此只有在item.rate为null或未定义时才清楚），您需要进行额外检查，因为0是falsy（因此0 | |“”是“”）。如果是，那么value={item.rate！==null？item.rate:“}”如何取决于您是否知道item.rate是否可能是未定义的，而不是null（在这种情况下，您可能希望显式地去掉零的大小写，让所有其他falsy值都转到“”，或者具有值={item.rate==null？''：item.rate}）。但这有点学术性。

interface IFormProps {
    initialItem: IItem;
}

interface IFormState {
    item: IItem;
}

export class Form extends React.Component<IFormProps, {}> {
    state: IFormState;

    constructor(props: IFormProps) {
        super(props);
        this.handleChange = this.handleChange.bind(this);

        this.state = {
             item: cloneDeep(props.initialItem)
        };
    }

    render() {
        const item = this.state.item;

        return (
            <input type="number" value={item.rate} onChange={this.handleChange} />
        );
    }

    handleChange() {
        // field change handling code including updating the state
    }
}