代码之家 › 专栏 › 技术社区 › why

连接到按钮的功能在不按的情况下调用

jsx frontend function reactjs javascript

why · 技术社区 · 1 年前

我有一个React JS代码:

class SideMenu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          inputNumber: '',
          inputMessage: ''
        };

        this.getAccountInfo = this.getAccountInfo.bind(this)
      }

    getAccountInfo(props) {
        console.log(props.inputNumber, props.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'/>
                        <button onClick={this.getAccountInfo(this.state)}>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
        });
    }

从这段代码中,我预计它将从我的输入中接收2个值,并仅在单击按钮后将它们输出到控制台。但是,由于某种原因,我的代码启动了 getAccountInfo 在我的输入值发生任何变化后,函数两次。此外,当按下按钮时,根本不会调用该函数。

1 回复 | 直到 1 年前

orangedietc 1 年前

您正在调用函数 getAccountInfo() (带括号)传递给 onClick .你应该把它去掉括号。要访问state值,不需要将它们作为参数传递。只需阅读 this.state 在功能体中。参见修改后的代码

class SideMenu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          inputNumber: '',
          inputMessage: ''
        };

        this.getAccountInfo = this.getAccountInfo.bind(this)
      }

    getAccountInfo() {
        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={this.updateInputNumber} placeholder='Number'/>
                        <input type='text' value={this.state.inputMessage} onChange={this.updateInputMessage} placeholder='Message'/>
                        <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
        });
    }