我有一个 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>
最佳答案
属性和属性名称在 React 中通常是 camelCase
,maxLength
有效。
<input
onChange={this.handleChangeInput}
value={this.state.form.message}
type="text"
className="phone validate"
name="phone"
maxLength="11"
/>
但是,如果您为输入提供的 value
长于 maxLength
,您仍然可以覆盖此选项。解决此问题的唯一方法是检查回调中 value
的长度,并将其 chop 。
示例
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"
/>
);
}
}
关于javascript - Maxlength 不起作用 React Js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51161510/