在输入字段上设置字符限制(使用react-contenteditable)不起作用

Question

我使用react-contenteditable库来显示输入值。我想把可以输入的字符限制为50个字符。我尝试过切片和子字符串，甚至检查字符串的长度，但没有任何限制，甚至在输入框中显示的第51等字符。另外，如果我在第50个字符之后使用slice或substring如果我按下空格键然后出现&符号附加到字符串的其余部分，应用程序似乎卡住了。

https://codesandbox.io/s/pedantic-dhawan-hbk1w2?file=/src/index.js

上面是代码

的链接

import React  from "react";
import ReactDOM from "react-dom";
import ContentEditable from "react-contenteditable";
import "./styles.css";
class MyComponent extends React.Component {
constructor() {
super()
this.contentEditable = React.createRef();
this.state = {html: "<b>Hello <i>World</i></b>"};
};
handleChange = evt => {
console.log(evt.target.value.length)
// if( evt.target.value.length <= 50){
//   this.setState({html: evt.target.value});
// }
this.setState({html: evt.target.value.slice(0,50)});

};
render = () => {
return <ContentEditable
innerRef={this.contentEditable}
html={this.state.html} // innerHTML of the editable div
disabled={false}       // use true to disable editing
onChange={this.handleChange} // handle innerHTML change

/>
};
};
const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);
``

Answer 1

这可能会解决您的问题

handleChange = evt => {
if(evt.target.value.length > 50){
return
}

this.setState({html: evt.target.value});
};