使用＆＃39; X＆＃39;隐藏输入值在输入中

Question

class InputChange extends Component {
  constructor(props) {
    super(props)
    this.state = { InputValue: '', }

  }
        <input  
            type='tel'
            spellCheck={false}
            value={this.state.InputValue}
             onKeyDown={(event) => this.keyHandler( event)}
          />


 keyHandler( event) {
    event = event || window.event;
    var charCode = (typeof event.which == "undefined") ? event.keyCode : event.which;

            if (charCode >= 48 && charCode <= 57) {
                var num = String.fromCharCode(charCode);
                let totalVal = this.props.user + num
                this.props.user = totalVal //
                this.setState({ tdlValue: totalVal.replace(/\d/g, 'X') })

            }
            else if (charCode == 8) {

                this.props.user=this.props.user.slice(0, selStart) + this.props.user.slice(selEnd)
                    this.setState({ ssnValue: this.props.user.replace(/\d/g, 'X') })
            }

 }
  componentWillReceiveProps(nextProps){

    if (this.props.user.==nextProps.user){
      alert("updated");
      }
      }

我的目标：

1）更新道具价值

2）显示状态值（以便用户可以看到X而不是他的输入）

我的问题：

1）我们可以使用OnChange事件而不是在Keydown上添加/删除，以便动态地改变值吗？

2）我们可以使用componentWillReceiveProps。

3）componentWillReceiveProps也没有解雇？

任何帮助都将不胜感激。