Reactjs 在HTML上仅使用React.js的简单T9键盘

我正在尝试使用HTML中的react.js内部标记来实现这个简单的T9键盘。 我在做1ABC，2DEF时遇到了麻烦。。。工作。键盘实际上只打印数字，我想让它像2000年手机上的旧键盘一样工作。所以，如果我按一次数字1，它会写1。如果我打它两次（很快），它会写一个。。。其他按钮也一样。我可以使用jquery来实现这一点，但是使用react我真的很不开心

这是密码。（外部css）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={numero:''}；
this.btn_0=this.btn_0.bind（this）；
this.btn_1=this.btn_1.bind（this）；
this.btn_2=this.btn_2.bind（this）；
this.btn_3=this.btn_3.bind（this）；
this.btn_4=this.btn_4.bind（this）；
this.btn_5=this.btn_5.bind（this）；
this.btn_6=this.btn_6.bind（this）；
this.btn_7=this.btn_7.bind（this）；
this.btn_8=this.btn_8.bind（this）；
this.btn_9=this.btn_9.bind（this）；
this.reset=this.reset.bind（this）；
}
btn_0（）{
让numero=this.state.numero+''；
this.setState（{numero}）；
}       
btn_1（）{
设numero=this.state.numero+'1'；
this.setState（{numero}）；
}
btn_2（）{
设numero=this.state.numero+'2'；
this.setState（{numero}）；
}       
btn_3（）{
让numero=this.state.numero+'3'；
this.setState（{numero}）；
}
btn_4（）{
让numero=this.state.numero+'4'；
this.setState（{numero}）；
}
btn_5（）{
让numero=this.state.numero+'5'；
this.setState（{numero}）；
}
btn_6（）{
让numero=this.state.numero+'6'；
this.setState（{numero}）；
}
btn_7（）{
让numero=this.state.numero+'7'；
this.setState（{numero}）；
}
btn_8（）{
让numero=this.state.numero+'8'；
this.setState（{numero}）；
}
btn_9（）{
让numero=this.state.numero+'9'；
this.setState（{numero}）；
}
btn_0（）{
让numero=this.state.numero+'0'；
this.setState（{numero}）；
}
重置（）{
让numero=''；
this.setState（{numero}）；
}       
render（）{
返回(
塞勒尔-卢卡斯·富塔多

1.
2abc
3def
4ghi
5jkl
6mno
7pqrs
8tuv
9wxyz
0
重置
);
}
}
ReactDOM.render（，document.getElementById（'mydiv'））；

---

在此处输入代码在代码中没有逻辑，实际上处理后续点击。您所描述的是100%实现的内容。有几种方法可以实现它，因为您已经使用jquery实现了它，您应该已经有了一个版本。

<div id="mydiv"></div>

<script type="text/babel">
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = { numero: '' };
        
        this.btn_0 = this.btn_0.bind(this);
        this.btn_1 = this.btn_1.bind(this);         
        this.btn_2 = this.btn_2.bind(this);         
        this.btn_3 = this.btn_3.bind(this);         
        this.btn_4 = this.btn_4.bind(this);         
        this.btn_5 = this.btn_5.bind(this);         
        this.btn_6 = this.btn_6.bind(this);         
        this.btn_7 = this.btn_7.bind(this);         
        this.btn_8 = this.btn_8.bind(this);         
        this.btn_9 = this.btn_9.bind(this);
        this.reset = this.reset.bind(this);         
      }
      btn_0() {
        let numero = this.state.numero + ' ';
        this.setState({numero});
      }       
      btn_1() {
        let numero = this.state.numero + '1';
        this.setState({numero});
      }
      btn_2() {
        let numero = this.state.numero + '2';
        this.setState({numero});
      }       
      btn_3() {
        let numero = this.state.numero + '3';
        this.setState({numero});
      }
      btn_4() {
        let numero = this.state.numero + '4';
        this.setState({numero});
      }
      btn_5() {
        let numero = this.state.numero + '5';
        this.setState({numero});
      }
      btn_6() {
        let numero = this.state.numero + '6';
        this.setState({numero});
      }
      btn_7() {
        let numero = this.state.numero + '7';
        this.setState({numero});
      }
      btn_8() {
        let numero = this.state.numero + '8';
        this.setState({numero});
      }
      btn_9() {
        let numero = this.state.numero + '9';
        this.setState({numero});
      }
      btn_0() {
        let numero = this.state.numero + '0';
        this.setState({numero});
      }
      reset() {
        let numero = '';
        this.setState({numero});
      }       
      render(){
        return (
          <form class="tabela">         
            <div>
                <table width="150" border="1" cellpadding="1" >
                    <tr>
                      <td colspan="3" >
                        <p>Celular - Lucas Furtado</p>
                        <input type="text" name="txt_01" value={this.state.numero}/>
                      </td>
                    </tr>
                    <tr>
                        <td>
                         <button type="button" value="1" name="btn_1" onClick={this.btn_1}> 
                           1
                         </button>
                        </td>
                        <td>
                         <button type="button" value="2" name="btn_2" onClick={this.btn_2}> 
                           2abc
                         </button>
                        </td>
                        <td>
                         <button type="button" value="3" name="btn_3" onClick={this.btn_3}> 
                           3def
                         </button>
                        </td>                           
                    </tr>
                    <tr>
                        <td>
                         <button type="button" value="4" name="btn_4" onClick={this.btn_4}> 
                           4ghi
                         </button>
                        </td>
                        <td>
                         <button type="button" value="5" name="btn_5" onClick={this.btn_5}> 
                           5jkl
                         </button>
                        </td>
                        <td>
                         <button type="button" value="6" name="btn_6" onClick={this.btn_6}> 
                           6mno
                         </button>
                        </td>
                    </tr>                       
                    <tr>
                        <td>
                         <button type="button" value="7" name="btn_7" onClick={this.btn_7}> 
                           7pqrs
                         </button>
                        </td>
                        <td>
                         <button type="button" value="8" name="btn_8" onClick={this.btn_8}> 
                           8tuv
                         </button>
                        </td>
                        <td>
                         <button type="button" value="9" name="btn_9" onClick={this.btn_9}> 
                           9wxyz
                         </button>
                        </td>
                    </tr>                       
                    <tr>
                        <td>
                            <input type='submit'/>
                        </td>
                        <td>
                         <button type="button" value="0" name="btn_0" onClick={this.btn_0}> 
                           0
                         </button>
                        </td>
                        <td>
                        <button type="button" onClick={this.reset}> 
                        Reset
                        </button>
                        </td>
                    </tr>                   
                </table>
            </div>          
          </form>
        );
      }
    }
    ReactDOM.render(<App />,document.getElementById('mydiv'));
</script>