React组件按钮绑定异常：函数自动触发且点击无响应问题

核心问题分析 #

1. 按钮点击事件绑定错误：
   代码里onClick={this.getAccountInfo(this.state)}是直接执行函数，而非将函数作为事件回调传递。每次组件重渲染（比如输入框更新state触发重渲染）时，这个函数都会被调用，这就是输入框变化时函数自动触发的原因；而点击按钮时，onClick的值是函数执行后的返回值（undefined），所以点击完全没反应。

2. getAccountInfo函数参数冗余：
   类组件中可直接通过this.state访问状态，不需要额外接收props参数。

修复后的代码 #

class SideMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          inputNumber: '',
          inputMessage: ''
        };

        this.getAccountInfo = this.getAccountInfo.bind(this);
        // 绑定输入更新函数，避免this指向错误
        this.updateInputNumber = this.updateInputNumber.bind(this);
        this.updateInputMessage = this.updateInputMessage.bind(this);
      }

    getAccountInfo() {
        // 直接访问组件自身的state
        console.log(this.state.inputNumber, this.state.inputMessage);
      }; 
      

    render() {
        return(
            <body className='SideMenuBg'>
                <div className='SideMenu'>
                    <frame className='sideMenuBackgroundFrame'>
                        <input type='text' value={this.state.inputNumber} onChange={evt => this.updateInputNumber(evt)} placeholder='Number'/>
                        <input type='text' value={this.state.inputMessage} onChange={evt => this.updateInputMessage(evt)} placeholder='Message'/>
                        {/* 用箭头函数包裹，确保点击时才执行getAccountInfo */}
                        <button onClick={() => this.getAccountInfo()}>press me</button>
                    </frame>
                </div>
            </body>
        )
    }

    updateInputNumber(evt) {
        const val = evt.target.value;   
        this.setState({
          inputNumber: val
        });
    }
    updateInputMessage(evt) {
        const val = evt.target.value;   
        this.setState({
          inputMessage: val
        });
    }
}

额外优化建议 #

可以把两个输入框的onChange逻辑合并成一个函数，减少重复代码：

// 用class fields写法，无需在constructor绑定this
handleInputChange = (evt) => {
  const { name, value } = evt.target;
  this.setState({ [name]: value });
}

对应输入框修改为：

<input type='text' name='inputNumber' value={this.state.inputNumber} onChange={this.handleInputChange} placeholder='Number'/>
<input type='text' name='inputMessage' value={this.state.inputMessage} onChange={this.handleInputChange} placeholder='Message'/>

内容的提问来源于stack exchange，提问作者why