react中的事件处理_react 中的button onclick=-优快云博客

本文介绍了React中事件处理的规范，包括使用小驼峰式命名、显式调用`preventDefault`来阻止默认行为，以及如何使用箭头函数绑定`this`。此外，还展示了如何在组件中处理表单数据，包括保存表单输入到状态以及在提交时防止页面刷新，并提供了登录表单的完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

<button onClick={activateLasers}>
  Activate Lasers
</button>

必须显式的使用 preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

可以使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

需要传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))