Question

我正在尝试在表单中使用Material-ui文本字段。通过仅授权十六进制字符的方式来控制此Textfield。

<form style={{ flex: '1' }} onSubmit={this.handleSubmit} noValidate autoComplete="off">
        <TextField margin='normal' label="Base address" size="small" variant="outlined" fullWidth
          InputProps={{ startAdornment: <InputAdornment position="start">0x</InputAdornment> }}
          helperText="Please enter 8 hexadecimal digits"
          value={this.state.address}
          onChange={event => {
            if (/^[0-9A-Fa-f]*$/.test(event.target.value))
              this.setState({ address: event.target.value })
            else this.setState({ address: this.state.address })
          }}
        />
</form>

这按预期工作，没问题。但是当我用自定义的CssTextField替换TextField

const CssTextField = withStyles({
      root: {
        '& label': {
          color: 'var(--input-foreground)',
          '&.Mui-focused': {
            color: 'var(--inputValidation-infoBorder)',
          },
        },
        '& input': {
          color: 'var(--input-foreground)',
        },
        '& input:invalid + fieldset': {
          borderColor: 'var(--inputValidation-errorBorder)',
        },

        '& .MuiFormHelperText-contained': {
          color: 'var(--input-foreground)',
        },
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: 'var(--input-foreground)',
        },

        '& .MuiOutlinedInput-root': {
          '&:hover fieldset': {
            borderColor: 'var(--thinput-foreground)',
          },
          '& fieldset': {
            borderColor: 'var(--input-foreground)',
          },
          '&.Mui-focused fieldset': {
            borderColor: 'var(--inputValidation-infoBorder)',
          },
          '& p.MuiTypography-colorTextSecondary': {
            color: 'var(--input-foreground)',
          },
        },
      },
    })(TextField);

应用了新样式，但与TextField相比，CssTextField的行为（不仅是样式）发生了变化。确实，一旦我输入了一个简单的字符，焦点就会从CssTextField中消失，我需要再次在该字段中单击以输入一个新字符...当然，“普通” TextField不会发生这种情况。

顺便说一句，当我使用CssTextField删除控件（删除道具值和onChange）时，不会发生这种奇怪的行为。

所以我处于可以控制输入但不能控制样式的情况，或者可以为TextField设置样式但不能控制输入！

其他信息：即使使用空样式（在withStyles中仅设置root：{}），也会出现问题。

任何建议都值得欢迎。谢谢

自定义（带有withStyle）控制的材质UI UI TextField的奇怪行为

0 个答案: