Блог

У меня есть простая HTML-форма с вводом name="comment" . Я отображаю результат с помощью jsx в приложении react с помощью {formData.comment} .
Форма и результат отлично работают для обычного ввода, например hello world , но для ввода специальных символов, например
that's вывод thatamp;#x27;s .
Как получить значение по мере его отправки в форму?

Вам придется заменить символьные объекты. Я не думаю, что есть собственный способ сделать это в Javascript (если да, то кто-нибудь, пожалуйста, прокомментируйте это или добавьте к нему ответ). Но, к счастью, сделать это вручную довольно просто:

 // The list of characters to escape
const htmlEscapes = {
  'amp;': 'amp;amp;',
  '<': 'amp;<',
  '>': 'amp;>',
  '"': 'amp;quot;',
  "'": 'amp;#x27;',
  '/': 'amp;#x2F;'
};

// Sample string with an apostrophe character entity in it
let str = 'thatamp;#x27;s';

// Loop over the entities to escape and regex them out
Object
  .entries(htmlEscapes)
  .forEach(([plain, hexCode]) => str = str.replace(new RegExp(hexCode, 'g'), plain));

// String is now sanitized
console.log(str);
 

Это всего лишь один примерный способ сделать это, суть в том, что вам нужно будет обработать строку, чтобы заменить их

Как вы получили свои данные?

 function Form() {
  const [comm,setComm] = React.useState()

  const submitHandler = e => {
    e.preventDefault()
    const data = new FormData(e.target)
    setComm(data.get('comment'))
  };

  return (
    <form onSubmit={submitHandler}>
      <input
        name="comment"
        type="text"
      />
      <button type="submit">
        submit
      </button>
      <div>Result : {comm}</div>
    </form>
  );
}