Material-ui: テキスト入力ボックスのmaxLength

@xuansehyunさん、 TextField要素に属性maxLengthを次のように設定できるはずです。

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

それがうまくいかない場合は教えてください。

それは私のために働きます、あなたは私が思うこれを閉じることができます:)

@otroboe同意します。

最小の長さが定義されたminLengthよりも短い場合に検証エラーを追加する方法

<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は、textareaではなくdivになりました。 上記の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に関するドキュメントはありません。

また、これをベータ版で機能させるのに問題があり、コンポーネントAPIの直接のプロパティである必要があるようです。

@JarLowreyはここでそれに答えました： https ：

参考までに、ここでも言及します。 [email protected]の入力長「たとえば10」の数を制限するには、次のコードを試してください。

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

InputPropsとinputPropsはTextFieldの2つの異なるプロパティであることに注意してください。 この事実は私の人生の数時間を無駄にしました。

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

InputPropsとinputPropsはTextFieldの2つの異なるプロパティであることに注意してください。 この事実は私の人生の数時間を無駄にしました。

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

同じように、最小長プロパティも正しく機能しますか？

@kenecaswell投稿ありがとう、私は自分が間違っていることを理解しようとして1時間過ごしました。

@kenecaswellあなたは命を救ったばかりです👍ありがとう仲間!!

type = 'number'がある場合、maxLengthは機能しません
type = 'number'
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>
          )
        }}
      />