Maxlength 不起作用 React Js

Posted 2023-03-05

【中文标题】Maxlength 不起作用 React Js

【英文标题】：Maxlength does not work React Js

【发布时间】：2018-12-12 04:15:09

【问题描述】：

我有一个 React 输入，但 maxlength 不起作用。有谁知道如何解决这个问题？

这是handleChangeInput

 handleChangeInput(input) 
    this.setState(
        ...this.state,
        form: 
            ...this.state.form,
            [input.target.name]: input.target.value
        
    )

这是我的意见：

<div className="input-field col s12 m6 l6">
    <input onChange=this.handleChangeInput value=this.state.form.message type="text" className="phone validate" name="phone" maxlength="11"/>
    <label for="telefone">Telefone</label>
</div>

【参考方案1】：

<input
    id="ZIPCode"
    className="form-control"
    type="text"
    maxLength=10 // this is the important line
></input>

React 使用 camelCased html 属性，因此 maxlength 将是 maxLength

【讨论】：

添加一些描述来解释你的代码。

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

我提交了一个编辑以在底部添加“React 使用 camelCased html 属性，因此 maxlength 将是 maxLength”，希望编辑被接受

【参考方案2】：

只需在你的 handleOnChange 函数中这样做：

 handlePasswordChange = (e) => 
    if(e.target.value <= 11)
    this.setState(
      [e.target.name]: e.target.value
    );
   
  ;

【讨论】：

优秀。简单有效

【参考方案3】：

对于使用 reactstrap 输入的任何人，就像它使用的其他属性（例如 colSpan）一样，它需要 camelCase 命名和传递给它的数字（例如 maxLength=250），而不是字符串。我发现传递一个字符串会起作用，但 React 会抱怨它。

【参考方案4】：

inputProps = maxLength:6
variant="outlined"

【参考方案5】：

您需要将 maxLength 值作为 数字 传递。

<input
  onChange=this.handleChangeInput
  value=this.state.form.message
  type="text"
  className="phone validate"
  name="phone"
  maxLength=11
/>

【讨论】：

如果您使用的是打字稿，则必须将值作为数字传递。

【参考方案6】：

要使 maxLength 起作用，类型必须是“文本”（大多数人可能会输入数字）

【讨论】：

那你怎么限制Numbers Only？

使用type="number" 并且不设置最大长度。但请记住，有些人喜欢在开头输入+ 的电话号码：或输入空格以提高数字的可读性。或者甚至使用/ 来分隔来电者前缀和主号码（或任何英文名称）。所以：电话号码很复杂。

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text@ArsalanAhmedQuershi

【参考方案7】：

属性和属性名在 React 中一般为 camelCase，maxLength 有效。

<input
  onChange=this.handleChangeInput
  value=this.state.form.message
  type="text"
  className="phone validate"
  name="phone"
  maxLength="11"
/>

但是，如果您输入的 value 长于 maxLength，您仍然可以覆盖此选项。解决此问题的唯一方法是检查回调中 value 的长度，然后将其截断。

示例

class App extends React.Component 
  state =  form:  message: ""  ;

  handleChangeInput = event => 
    const  value, maxLength  = event.target;
    const message = value.slice(0, maxLength);

    this.setState(
      form: 
        message
      
    );
  ;

  render() 
    return (
      <input
        onChange=this.handleChangeInput
        value=this.state.form.message
        type="text"
        className="phone validate"
        name="phone"
        maxLength="11"
      />
    );
  

【讨论】：

我尝试使用 maxLength 作为 bedCase 但它也不起作用

这是正确的做法，我已经测试了相同的示例并且效果很好。

不需要处理程序，developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text