在React

Question

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

组件代码如下所示（这被简化为极小的示例，实际表单有更多字段和一些显示结构）;

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
    }
}

在项目上，费率字段的类型为数字。

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

  

警告：value上的input道具不应为空。考虑使用空字符串清除组件，或undefined使用不受控制的组件。

在字段中键入数字后，我收到控制台错误;

  

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

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

使用类型文本的类似字段（typescript中的字符串），作为空字符串启动会给出正确的结果，但我不能这样做，因为item.rate的类型是数字。

有没有办法围绕这个，所以该字段将为空，直到用户输入没有出现任何这些控制台错误的内容？