2017-08-28 85 views
2

我是新的React JS,我试图删除输入值,当用户在输入值中插入这个,我如何获得数组“黑名单”,并改变键入时删除输入中的单词。谢谢!!!ReactJS - 如何阻止输入中的黑客字符

class BlackWordInput extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     place: 'Digite uma palavra!' 
 
    } 
 
    } 
 
    handleVerifyWord(e) { 
 
    if (this.value === blacklist[i]) { 
 
     this.refs.input.value = ""; 
 
    } 
 
    } 
 
    render() { 
 
    return (< 
 
     div > 
 
     < 
 
     input type = "text" 
 
     placeholder = { 
 
     this.state.place 
 
     } 
 
     onKeyUp = { 
 
     this.handleVerifyWord.bind(this) 
 
     } 
 
     /></
 
     div > 
 
    ) 
 
    } 
 
} 
 
class getBlackList extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     data: [] 
 
    }; 
 
    } 
 
    getBlackData() { 
 

 
    } 
 
} 
 
const blacklist = [{ 
 
    id: 0, 
 
    name: 'Block' 
 
}, { 
 
    id: 1, 
 
    name: 'Blocker' 
 
}]
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> 
 
<div id="blackword"></div>

回答

0

两件事情:

  1. 您应该使用ref或e.target.value获得输入的文本内容。

  2. 而不是if(e.target.value === blacklist[i]),您需要检查项目是否存在于阵列中的任何位置。一种方法是if(blacklist.indexOf(e.target.value) > -1)

  3. 如果为true,则应该只替换正在测试的值: e.target.value = e.target.value.replace(blacklist[i], '')。你需要首先找出你要删除的单词。

相关问题