reactjs材质ui自定义组件onchange错误答案

【问题标题】：reactjs material ui custom component onchange errorreactjs材质ui自定义组件onchange错误
【发布时间】：2020-01-22 02:07:10
【问题描述】：

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

【问题讨论】：

错误是什么？
配置中有什么？
配置是这一行const { prefix1, prefix1Setter, value, valueSetter, label, disabledThis = false } = config;
错误是，用户界面加载完美，但是当我在框中输入一个值时，onChange={evt => prefix1Setter(evt.target.prefix1)} 抛出，处理更改错误。

标签： reactjs material-ui

【解决方案1】：

这个 onChange 处理程序应该是

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

应该是

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

【讨论】：