最大长度无效React Js

Question

最大长度无效React Js

47

我在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>

- Mike Otharan

9个回答

49

为了使maxLength生效，type必须为'text'（大多数人可能会将其设置为number）。

- Micah Friedland

3

那么，如何限制它不仅仅是“数字”？ - Nauman Moazzam

通过使用 type="number" 而不设置 maxlength。但请记住，有些人喜欢在电话号码前加上 +，或者输入空格以使数字更易读。甚至使用 / 分隔呼叫者前缀和主要号码（或英语中称为其他内容）。所以：电话号码很复杂。 - cloned

请将以下与编程有关的内容从英语翻译为中文。仅返回已翻译的文本：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text - CodeFarmer

为了限制只能输入数字，您可以使用具有数字的正则表达式的模式属性，即使输入类型为文本，如果输入为字母，则会使其无效。 - Felix Orinda

16

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

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

- Chirag Shah

3

若您使用 TypeScript，必须将数值作为参数传递。 - Chirag Shah

5

inputProps = {{maxLength:6}}
variant="outlined"

- aakash sharma

3

对于输入类型为number的人，这段代码将起作用

handlePhone(object) {
    if (object.target.value.length > object.target.maxLength) {
      object.target.value = object.target.value.slice(0, object.target.maxLength)
      this.setState({ phone: object.target.value });
    }
}

<input
    placeholder="Phone Number"
    onChange={this.handlePhone}
    type = "number" maxLength = "10"
/>

- Rahul Dasgupta

2

在您的handleOnChange函数中，只需按照以下方式操作：

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

- Jaskaran Singh

优秀。简单而有效。 - Michael K

1

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

React使用驼峰式的HTML属性，因此maxlength应该写成maxLength。

- Wani Mudasir

3

为您的代码添加一些描述。 - a.ak

1

虽然这段代码可能回答了问题，但提供有关为什么和/或如何回答问题的其他上下文可以提高其长期价值。 - Al Foиce ѫ

1

我提交了一个编辑，希望能接受。在底部添加了“React使用驼峰式的HTML属性，所以maxlength应该是maxLength”。 - Werlious

0

我已经使用简单属性修复了这个问题。

<TextField
  type="text"
  pattern="[0-9]{10}"
  maxLength="10"
  label="Phone Number"
 />

- Mohammed Yousuff

0

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

- Treadmeister

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tholle · Accepted Answer

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