Как обработать изменение значения на компоненте ввода материала - PullRequest
Новая
       6

Как обработать изменение значения на компоненте ввода материала

0 голосов
/ 31 октября 2018

Вот код из материала настроенного компонента 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>

Предупреждение возвращает пустое сообщение, я попытался вручную установить значение состояния в строку, и это прекрасно работает, есть идеи, как это сделать?

1 Ответ

0 голосов
/ 31 октября 2018

Попробуй с этим. Вы не передаете значение и onChange элементу ввода 

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