Material-ui: 文本输入框的maxLength

嘿@xuansehyun ，您应该可以在TextField元素上设置属性maxLength ，如下所示：

<TextField
    style={styles.textfield}
    hintText="Hint Text (MultiLine)"
    multiLine={true} 
    maxLength="2" />

让我知道那是否行不通。

它对我有用，您可以关闭我的想法:)

@otroboe我同意。

如果最小长度小于定义的最小长度，如何添加验证错误

<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
  <div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
    <textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
  </div>
</div>

我尝试了一下，但没有成功。 maxLength结束于div，而不是textarea。 这是生成上述HTML的代码。

<TextField
              InputProps={{
                id: 'announcementText',
                disableUnderline: true,
                multiline: true,
                rows: 10,
                classes: {
                  root: textFieldTextRoot,
                  input: textFieldTextInput,
                },
              }}
              maxLength="2"
              name="text"
              type="text"
              value={this.state.text}
              onChange={this.handleInputChange}
              placeholder="Update Text"
              style={{ display: 'block' }}
            />

"material-ui": "1.0.0-beta.30",

更新：我发现我可以使用inputProps={{maxLength: 2}}使它正常工作。 外壳很重要。 它不适用于InputProps

在TextField上没有直接有关maxLength的文档。

我在使用beta时也遇到了麻烦，并且绝对似乎应该直接将其作为组件API的属性。

@JarLowrey在这里回答了： https :

作为参考，我在这里也提到了。 要限制[email protected]中输入长度'eg 10'的数量，请尝试以下代码：

<TextField
  inputProps={{
    maxLength: 10,
  }}
/>

请注意， InputProps和inputProps是TextField的两个不同属性。 这个事实浪费了我一生的几个小时。

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

请注意， InputProps和inputProps是TextField的两个不同属性。 这个事实浪费了我一生的几个小时。

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

以同样的方式，最小长度属性也可以正常工作吗？

@kenecaswell感谢您的帖子，我只是花了一个小时试图弄清楚我做错了什么。

@kenecaswell您刚刚救了一条命👍谢谢兄弟！

如果有type ='number'，则maxLength将不起作用
类型='数字'
inputProps = {{
maxLength：10，
}}
/>
它应该是：
inputProps = {{
maxLength：10，
}}
/>

没有任何属性的更好解决方案（以防万一它们不起作用）。
在TextField的onChange() ，仅当值的长度等于<YOUR_MAX_LENGTH>更新状态。

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

没有任何属性的更好解决方案（以防万一它们不起作用）。
在TextField的onChange() ，仅当值的长度等于<YOUR_MAX_LENGTH>更新状态。

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

OnChange永远不是更好的解决方案，因为即使在达到限制后，它仍然会触发事件，对于现代CPU来说似乎没有任何作用，但我们应该设计系统以在HTML级别上实施限制。 maxLength是HTML属性，即使没有JavaScript也可以与跨浏览器兼容

inputProps={{ maxLength: 365 }}对我有用。

如果您使用的是formik-material-ui ，则可以使用以下方法：
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

我想使用type='number' ，所以对我来说唯一的解决方案是在setState部分使用substring 。

例：

  const [deposit, setDeposit] = React.useState<number | null>(null);
  const disabled = deposit == null || deposit < 0 || deposit === 0;

  return (
      <TextField
        variant='outlined'
        color='primary'
        fullWidth
        type='number'
        value={deposit}
        onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
        label='Deposit'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <Button
                variant='text'
                disabled={disabled}
                color={'primary'}
                onClick={(_) => onSend(deposit!)}>
                <Typography color='primary'>{'Submit'}</Typography>
              </Button>
            </InputAdornment>
          )
        }}
      />