reactjs材质ui定制组件onchange错误

Question

我已经在Reactjs中创建了自己的自定义组件，名为OutlinedFieldWithLabelAndPrefix 用前缀保存值。像MYR-13245

这样的值

我的问题是onChange={evt => prefix1Setter(evt.target.prefix1)}行给出了错误。 html浏览器对该行抛出错误。

    import {Paper, InputBase, Divider} from '@material-ui/core';
    const styles = theme => ({
        prefix: {
            marginLeft: theme.spacing(1),
            flex: 1
        }
    });



    const OutlinedFieldWithLabelAndPrefix = props => {
    const { classes, config } = props;
    const { prefix1, prefix1Setter, value, valueSetter, label, disabledThis = false } = config;

      return (
        <div>
          <div className={classes.label}>
            {label}
          </div>
          <Paper className={classes.root}>
            <InputBase
              type="text"
              value={prefix1}
              onChange={evt => prefix1Setter(evt.target.prefix1)}
              className={classes.prefix}
              maxLength="3"
              inputProps={{
                root: classes.inputRoot
              }}
            />
            <div>-</div>
            <InputBase
          type="number"
          value={value}
          onChange={evt => valueSetter(evt.target.value)}
          maxLength="5"
          className={classes.input}
          inputProps={{
            root: classes.inputRoot
          }}
        />
      </Paper>
    </div>
  );
}

Answer 1

此onChange处理程序应为

onChange={evt => prefix1Setter(evt.target.prefix1)}

应该是

onChange={evt => prefix1Setter(evt.target.value)}