Question

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

    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>
      ); 
      }
  }

Answer 1

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

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

Answer 2

我发现您犯了两个错误：

以小写形式调用函数（handlechange3）。（与我的代码比较）。
您的状态未更新的主要原因是，当您在按钮上调用事件时，点击了事件定位按钮，该按钮最终没有值属性。（在提交表单的情况下，您更改了状态，因为事件的目标是form-> element-> username-> value）

此处是固定代码

 import React from 'react';

 class LoginForm extends React.Component {

 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，以获取输入值。

希望我能帮助您：）

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

2 个答案: