ReactJS，一个组件正在更改要控制的数字类型的无控制输入。

Question

这是我得到的警告：

index.js:1446 Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

in input (created by InputBase)
in div (created by InputBase)
in InputBase (created by Context.Consumer)
in WithFormControlContext(InputBase) (created by WithStyles(WithFormControlContext(InputBase)))
in WithStyles(WithFormControlContext(InputBase)) (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (at register-operating-instructions-sscc.js:424)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at register-operating-instructions-sscc.js:423)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at register-operating-instructions-sscc.js:1071)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at register-operating-instructions-sscc.js:1070)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at register-operating-instructions-sscc.js:1011)
in div (at register-operating-instructions-sscc.js:1010)
in RegisterOperatingInstructionsSscc (created by WithStyles(RegisterOperatingInstructionsSscc))

这是第423行的代码：

<Grid item xs={2} style={{marginLeft: '-25px', marginRight: '55px'}}>
    <Input id="sscc-ctfm" aria-describedby="component-error-text" onChange={this.handleMwAsignadoCtfm} value={valueMwAsignado} disableUnderline type="number"/>
</Grid>

this.handleMwAsignadoCtfm是：

handleMwAsignadoCtfm = (e) => {
    const {scSelected, row, existeData} = this.state;
    const key = 'mw_assigned';
    const value = e.target.value
    this.props.getSscc(key, value, scSelected, row, existeData);
    this.setState({valueMwAsignado: value});
}

有什么问题吗？

Answer 1

确保valueMwAsignado的初始值是空字符串。否则，初始值将为undefined，这意味着不提供任何值，并且组件处于无控制状态。

一旦输入某项内容，更新valueMwAsignado变量并将其作为值传递，就会提供该值并控制该组件。