Question

这是材料定制组件CostumINput中的代码

   import Input from "@material-ui/core/Input";


   function CustomInput({ ...props }) {
 const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
white,
inputRootCustomClasses,
 success
} = props;

const labelClasses = classNames({
 [" " + classes.labelRootError]: error,
[" " + classes.labelRootSuccess]: success && !error
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true,
[classes.whiteUnderline]: white
});
const marginTop = classNames({
[inputRootCustomClasses]: inputRootCustomClasses !== undefined
});
 const inputClasses = classNames({
[classes.input]: true,
 [classes.whiteInput]: white
});
var formControlClasses;
if (formControlProps !== undefined) {
formControlClasses = classNames(
  formControlProps.className,
  classes.formControl
);
} else {
 formControlClasses = classes.formControl;
 }
 return (
  <FormControl {...formControlProps} className={formControlClasses}>
  {labelText !== undefined ? (
    <InputLabel
      className={classes.labelRoot + " " + labelClasses}
      htmlFor={id}
      {...labelProps}
    >
      {labelText}
    </InputLabel>
  ) : null}
  <Input
    classes={{
      input: inputClasses,
      root: marginTop,
      disabled: classes.disabled,
      underline: underlineClasses
    }}
    id={id}
    {...inputProps}
  />
 </FormControl>
);
}

CustomInput.propTypes = {
classes: PropTypes.object.isRequired,
labelText: PropTypes.node,
labelProps: PropTypes.object,
id: PropTypes.string,
inputProps: PropTypes.object,
formControlProps: PropTypes.object,
inputRootCustomClasses: PropTypes.string,
error: PropTypes.bool,
success: PropTypes.bool,
white: PropTypes.bool
};

 export default withStyles(customInputStyle)(CustomInput);

当我在主应用程序上调用它们时，我想记录用户在此输入上键入的值。我的主应用程序的代码：

class myapp extends React.Component {
state={
name:"",
value:"",
msg:""
 }
 handleChange = (event) => {
 this.setState({
  value: event.target.value,
});
};


 showinfo = () =>{
alert(this.state.value)
}
 render() {
  const { classes } = this.props;
  return (
  <div className={classes.section}>
              <CustomInput
                labelText="Your Name"
                value={this.state.value}
                onChange={this.handleChange}
                id="filled-value-input"
                formControlProps={{
                  fullWidth: true
                }}
              />
           <button onClick={this.showinfo}>send</button>
           </div>

警报返回一个空消息，我尝试手动将状态值设置为字符串，并且可以正常工作，有关如何执行操作的任何想法？

Answer 1

尝试一下。您没有将value和onChange传递给输入元素

   <Input
     classes={{
         input: inputClasses,
         root: marginTop,
        disabled: classes.disabled,
        underline: underlineClasses
     }}
      id={id}
      {...inputProps}
      value={props.value}
      onChange={props.onChange}
   />

Answer 2

Hemadri的答案对我有用，但是您不需要为价值做任何事情。

<Input
    classes={{
      input: inputClasses,
      root: marginTop,
      disabled: classes.disabled,
      underline: underlineClasses
    }}
    id={id}
    {...inputProps}
    onChange={props.onChange}
/>

为我工作。然后，在调用CustomInput时，向其传递onChange属性，如下所示：

<CustomInput
   labelText="First Name..."
   id="first"
   onChange={(e) => console.log(e.target.value)}
   type: "text"
/>

如何处理物料输入组件上的更改值

2 个答案: