Как изменить значение ввода на индекс?
Я хочу, чтобы моя функция handleChangeEvent изменила значение ввода на индекс. Как это сделать в React?
class App extends Component {
state = {
equation: ""
};
handleChangeEvent = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const { equation } = this.state;
console.info(equation);
return (
<div>
<input onChange = {this.handleChangeEvent} value = {equation} name = "equation" />
</div>
);
}
}
Вам нужно будет найти или написать метод, который преобразует буквы в подстрочные html-объекты (достаточно простой карты). В нынешнем виде методы sub и sup (которые возвращают строку, обернутую в уважаемые теги) устарели, и я не могу найти современный стандарт для этого
Извините меня дезинформировали. Методы String .sub и .sup устарели, а не теги HTML. Так что просто используйте теги, и все будет хорошо (если ввод может это отобразить)
Я пытался использовать подтеги во входных данных, и, похоже, это не сработало. Идея с функцией кажется лучше
Похоже, что это единственный способ «рендеринга» html внутри входного тега (stackoverflow.com/questions/5823835/…), поэтому вложенный тег здесь может не помочь, похоже, что вместо этого вам нужны буквы нижнего индекса.
На самом деле мне нужны только цифры, чтобы быть индексом, и похоже, что есть только объекты верхнего индекса :)
Ответы 1
Regex выберите + захватите цифровые символы и замените их соответствующим html-объектом нижнего индекса:
handleChangeEvent = event => {
const formattedValue = event.target.value.replace(/(\d)/g, '̀$1;');
this.setState({ [event.target.name]: formattedValue });
};
@ZohirSalak немного почитал, они выполняют деструктурирование в верхней части метода рендеринга, поэтому вам не нужно вводить
this.stateдля каждой ссылки наequation. Кроме того, методhandleChangeEventхорош, он использует вычисляемое свойство, так что он становится методом многократного использования вместо жестко заданных имен. Теперь они могут добавить 100 различных (или больше/меньше) входных данных и использовать один и тот же метод для их обработки.