react+maxlength不生效如何解決

本篇內容介紹了“react+maxlength不生效如何解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

react+maxlength不生效的解決辦法：1、打開相應的react文件；2、將“maxlength”修改成“maxLength”即可，代碼如“<input id="ZIPCode"className="form-control"type="text"maxLength={10}></input>”。

問題描述：

我有一個 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>

問題解決：

將maxlength改成maxLength！注意是大寫的L。

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

React 使用 camelCased html 屬性，因此 maxlength 將是 maxLength。

“react+maxlength不生效如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！