ReactJS,一个组件正在更改要控制的类型号的不受控制的输入



这是我得到的警告:

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

怎么了?

请确保valueMwAsignado的初始值为空字符串。否则,初始值将为undefined,这意味着没有提供任何值,并且组件处于非受控状态。

键入内容后,立即更新valueMwAsignado变量并将其作为值传递,此时将提供该值,并控制该组件。

相关内容

最新更新