反应按钮对点击事件无反应

Posted 2023-02-15

我不确定为什么“单击我”按钮没有更新状态。语法看起来不错，因为我没有错误。但是点击没有响应。我认为处理程序根本不会被调用。我无法弄清楚。谢谢。

    class LoginForm extends React.Component 
  constructor(props) 
    super(props);
    this.state =  
      username: '',
      username2: "",
      buttonValue: "A"
    ; 
  
  handleChange = event => 
    event.preventDefault();
    console.log(event.target.elements.username.value)
    this.setState( username: event.target.elements.username.value ); 
  ;
  handleChange2 = event =>   
    console.log(event.target.value)
    this.setState( username2: event.target.value );   
  ;
  handlechange3 = event => 
    console.log('clicked');
    this.setState( buttonValue: event.target.value );
  
  render()  
    var x=1;
    return (
    <div> 
      <form onSubmit=this.handleChange>/* the input value is captured by event.target.elements.username.value by handleChange*/
        <label htmlFor="username">username</label> 
        <input
          type="text"
          name="username"          
        />
        <input type='submit' /> 
      </form>
      <label>username2</label> 
      <input type='text' onChange=this.handleChange2 /> /* the input value is captured by event.target.value by handlechange2 */
      <br />
      <button onClick=this.handleChange3>
        Click me
      </button>
      <h3>Your username value is: this.state.username</h3> 
      <h3>Your username2 value is: this.state.username2</h3> 
      <h3>Your button value is: this.state.buttonValue</h3>
    </div>
      ); 
      
  

答案

单击我的按钮不起作用，因为处理程序函数定义名称中存在拼写错误。

handleChange3 = event =>  // change handlechange3 to handleChange3
    console.log('clicked');
    this.setState( buttonValue: event.target.value );

另一答案

我发现您犯了三个错误：

1. 用小写字母调用函数（handlechange3）。（与我的代码比较，你会发现）
2. 在类组件中创建类似功能组件的状态。（我在下面进行了注释）
3. 您的状态不会更新的主要原因，因为当您单击按钮上的事件时，该事件是定位按钮，该按钮最终没有值属性。（以防万一，您需要更改状态表单提交的原因，因为event的目标是form-> element-> username-> value]

这里是固定代码

 import React from 'react';

 class LoginForm extends React.Component 
 //   constructor(props) 
 //     super(props);
 //     this.state =  
 //       username: '',
 //       username2: "",
 //       buttonValue: "A"
 //     ; 
 //   
state = 
    username: '',
    username2: "",
    buttonValue: "A"
;
handleChange = event => 
event.preventDefault();
console.log(event.target.elements.username.value)
this.setState( username: event.target.elements.username.value ); 
;
handleChange2 = event =>   
console.log(event.target.value)
this.setState( username2: event.target.value );   
;
handleChange3 = () => 
console.log('clicked');
this.setState( buttonValue: document.getElementById('Satish').value );
console.log(document.getElementById('Satish').value)

render()  
//var x=1;
return (
<div> 
  <form onSubmit=this.handleChange>/* the input value is captured by event.target.elements.username.value by handleChange*/
    <label htmlFor="username">username</label> 
    <input type="text" name="username" />
    <input type='submit' /> 
  </form>
  <label>username2</label> 
  <input type='text' onChange=this.handleChange2 id="Satish" /> /* the input             value is captured by event.target.value by handlechange2 */
  <br />
  <button onClick=this.handleChange3>
    Click me
  </button>
  <h3>Your username value is: this.state.username</h3> 
  <h3>Your username2 value is: this.state.username2</h3> 
  <h3>Your button value is: this.state.buttonValue</h3>
</div>
  ); 
  
  
  export default LoginForm;

为了确定输入值，我在名为satish的输入值中明确添加了一个ID以获取输入值。

希望我帮助了您：）