Tengo un cuadro de entrada en mi componente de reacción.
const {Component} = React; class Example extends Component { constructor(props) { super(props); this.state = { searchText: "", }; } restrictSpecialCharacters = (e) => { const nospecial = /^[A-Za-z0-9]+$/; const textValue = e.target.value; if (textValue.match(nospecial)) { this.setState({ searchText: textValue }) } }; render() { return <input type="text" className="form-control form-control-lg material-textfield-input" name="carrierACNumber" value={this.state.searchText} onChange={(e) => this.restrictSpecialCharacters(e) } required />; } } ReactDOM.render(<Example/>, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>funciona como se esperaba, pero cuando trato de eliminar el último carácter al presionar la tecla de retroceso, no lo elimina. ¿Cómo puedo hacer expresiones regulares que eliminen ese último carácter?
La razón por la que no le permite eliminar el último carácter es porque el + en su expresión regular significa "uno o más", lo que no permite que aparezcan 0 caracteres; ya no coincide con la expresión regular.
Si cambia su expresión regular a /^[A-Za-z0-9]*$/ eso debería resolver su problema, ya que * es 0 o más:
const {Component} = React; class Example extends Component { constructor(props) { super(props); this.state = { searchText: "", }; } restrictSpecialCharacters = (e) => { const nospecial = /^[A-Za-z0-9]*$/; const textValue = e.target.value; if (textValue.match(nospecial)) { this.setState({ searchText: textValue }) } }; render() { return <input type="text" className="form-control form-control-lg material-textfield-input" name="carrierACNumber" value={this.state.searchText} onChange={(e) => this.restrictSpecialCharacters(e) } required />; } } ReactDOM.render(<Example/>, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>