Reactjs 当我在相邻的文本字段中键入时，为什么会触发onclick函数？ import React，{Component}来自'React'； 从“axios”导入axios； 导出默认类CreateDog扩展组件{ 建造师（道具）{ 超级（道具） 此.state={ 名称：“”， activityLevel:“”， 说明：“” } this.newDog=this.newDog.bind（this） } 新狗{ var doggy={ 名称：this.state.name， activityLevel:this.state.activityLevel， description:this.state.descriptionOne } axios.post（'/api/createdog'，doggy） 。然后（响应=>{ 返回响应。数据[0] }) } render（）{ 返回( this.setState（{name:e.target.value}）}> this.setState（{activityLevel:e.target.value}）}> this.setState（{description:e.target.value}}> ) } }

事先非常感谢你。我是个初学者，所以我知道我的代码让你畏缩。正如你所看到的，我有这些文本区域，我已经编程设置为在更改时设置状态。我还有下面的按钮，用来收集状态信息，并将其发送到我的服务器，最终发送到我的数据库

每当我在文本区域中键入任何内容时，控制台都会显示axios请求被触发，但axios不是我onChange函数的一部分。我的onClick函数newDog似乎在有人在textarea中键入时被解雇，我不知道为什么

---

有什么想法吗？

您必须将其绑定为回调：

onClick={（）=>this.newDog.bind（this）}

使用括号传递参数将导致函数立即执行：

import React, {Component} from 'react';
import axios from 'axios';


export default class CreateDog extends Component{
    constructor(props){
        super(props)

    this.state = {

        name: '',
        activityLevel: '',
        description: ''
    }

    this.newDog = this.newDog.bind(this)
}

newDog(dog) {

var doggy = {
    name: this.state.name,
    activityLevel: this.state.activityLevel,
    description: this.state.descriptione
}



 axios.post('/api/createdog', doggy)
        .then(response => {
            return response.data[0]
        })

}

render(){
    return(
        <div>
        <div>
            <textarea type="text" placeholder="dog breed name" onChange={(e) => this.setState({name: e.target.value})}> </textarea>
            <textarea type="text" placeholder="dog breed activity level" onChange={(e) => this.setState({activityLevel: e.target.value})}> </textarea>
            <textarea type="text" placeholder="dog breed description" onChange={(e) => this.setState({description: e.target.value})}></textarea>

        </div>

        <div>
            <button onClick={this.newDog(this.state)}></button>
        </div>
    </div>
)

}

} 

可以使用匿名函数传递参数：

onClick={ this.newDog(this.state) }

但是，您实际上不需要将this.state作为参数传递，这样您就可以使用：

onClick={ () => this.newDog(this.state) }

在构造函数中绑定newDog时，您已经可以在newDog中访问this.state

onClick={（）=>this.newDog（this.state）}

onClick={ this.newDog }