无法使用React.js正确检查输入值

Question

我需要使用React.js检查用户输入值，但它不能按预期工作。我在下面解释我的代码。

   import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
class TodoList extends Component {
  constructor(props, context){
    super(props, context);
    this.state={
      items:[]
    }
    this.listOfKeyWords = ["script", "embed", "object", "iframe"];
    this.addItem=this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.editItem = this.editItem.bind(this);
  }
  addItem(e){
    e.preventDefault();
    if(this.state.editKey){
      this.saveEditedText();
      return;
    }
    let maliciousStr = this.listOfKeyWords.find(tag => {
      return this.inputElement.value.toLowerCase().indexOf(tag) !== -1;
    });
    if (!maliciousStr) {
      var itemArray = this.state.items;
      if (this.inputElement.value !== '') {
        itemArray.unshift({
          text:this.inputElement.value,
          key:Date.now()
        })
        this.setState({
          items:itemArray
        })
        this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has added successfully</p>');
        this.inputElement.value='';
        setTimeout( () => {
            this.divRef.querySelector(':last-child').remove();
        }, 3000);
      }
    }else{
      this.inputElement.value='';
    }
  }
  deleteItem(key) {
    const result = window.confirm('Are you sure to delete this item');
    if (result) {
      var filteredItems = this.state.items.filter(function (item) {
        return (item.key !== key);
      });

      this.setState({
        items: filteredItems
      });
    }
  }
  editItem(key){
    this.state.items.map(item =>{
      if (item.key==key) {
        this.inputElement.value=item.text;
      }
    })
    this.setState({editKey: key});
  }
  saveEditedText(){
    let value = this.inputElement.value;
    this.setState(prevState => ({
      items: prevState.items.map(el => {
        if(el.key == prevState.editKey)
          return Object.assign({}, el, {text: value});
         return el;
      }),
      editKey: ''
    }));
    let maliciousStr = this.listOfKeyWords.find(tag => {
      return this.inputElement.value.toLowerCase().indexOf(tag) !== -1;
    });
    if (!maliciousStr) {
      this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">'+this.inputElement.value+' has updated successfully</p>');
      setTimeout( () => {
          this.divRef.querySelector(':last-child').remove();
      }, 3000);
      this.inputElement.value='';
    }else{
      this.inputElement.value='';
    }
  }
  render() {
    return (
      <div className="todoListMain">
        <div className="header" id="parentDiv">
          <div className="pageHeading" dangerouslySetInnerHTML={{ __html: "Todo Demo Application" }}></div>
          <div className="wrapper">
            <div ref={divEl => {
            this.divRef = divEl;
          }}></div>
            <form onSubmit={this.addItem}>
              <input ref={(a)=>this.inputElement=a} placeholder="enter task">
              </input>
              <button type="submit">{this.state.editKey? "Update": "Add"}</button>
            </form>
            <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
          </div>
        </div>
      </div>
    );
  }
}

export default TodoList;

我在这里添加数据，提交消息后显示在顶部。这里我有一个验证，如果用户输入的值如<script>Hii</script>，则不会显示消息或者无法添加值，但在我的编码中它不会发生这样的情况。我需要<script>Hii</script>，那些将被过滤掉。