Javascript 单击时处理输入值

当我在两个文本框中键入内容时，我试图处理状态的更改，然后当用户单击按钮时，它会将状态设置为它的状态，然后是console。将当前的更改状态记录到console

基本上我有：

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            catname: '',
            catamt: 0
        };

        this.addBudget = this.addBudget.bind(this);
    }

    addBudget(e) {
        e.preventDefault();

        this.setState({
            catname: e.target.value,
            catamt: e.target.value
        });

        console.log('console log catname here.....', this.state.catname);
        console.log('console log catamt here.....', this.state.catamt);
    }
}

然后在窗体所在的组件中：

import React from 'react';

export default class AddBudget extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
        <div className="cat-input">
          <input
            type="text"
            name="categoryname"
            placeholder="Budget Category"
          />
          <input
            type="number"
            name="categoryamount"
            placeholder="Target Budget"
          />
        </div>
        <button onClick={this.addBudget}>+</button>
        );
    }
}

从“React”导入React；
导出默认类AddBudget扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
+
);
}
}

---

如何将输入值传递给函数并记录状态的变化？

更类似于此，我建议使用带react的受控输入

你可以在这里了解更多

给你举个例子：）

首先，您需要跟踪状态的值。其次，使用表单可以处理提交。这样，如果用户单击按钮或按enter键，则可以处理submit方法

在_handleChange方法中，您将收到事件。这就是输入变化。如果你使用console.log这个值，你可以看到他有名字，你在输入中传递的名字。通过这种方式，您可以将其用作对象的关键变量。因此，一个函数用于2:）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
catname:“”，
类别：0
};
this.addBudget=this.addBudget.bind（this）；
}
addBudget=（e）=>{
e、 预防默认值（）；
console.log（'console log catname here…'，this.state.catname）；
log（'console log catamt here…'，this.state.catamt）；
}
_handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
render（）{
返回(
)
}
}
导出默认类AddBudget扩展React.Component{
render（）{
返回(
+
);
}
}

您有两门课吗

AddBudget

和

App

？@riwu:是的。AddBudget是位于我的组件文件中的另一个组件。您能详细解释一下这一部分吗：[e.target.name]：e.target。value@MarcSolva我刚刚编辑过，如果您还有其他问题，请告诉我：）希望能帮助您：）

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      catname: '',
      catamt: 0
    };

    this.addBudget = this.addBudget.bind(this);
  }

  addBudget = (e) => {
    e.preventDefault();

    console.log('console log catname here.....', this.state.catname);
    console.log('console log catamt here.....', this.state.catamt);
  }

  _handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <AddBudget handleChange={this._handleChange} addBudget={this.addBudget} />
    )
  }
}

export default class AddBudget extends React.Component {
  render() {
    return (
        <div className="cat-input">
          <form onSubmit={this.props.addBudget}>
            <input
            type="text"
            name="catname"
            onChange={this.props.handleChange}
            placeholder="Budget Category"
          />
          <input
            type="number"
            name="catamt"
            placeholder="Target Budget"
            onChange={this.props.handleChange}
          />
          <button type="submit">+</button>
          </form> 
        </div>
    );
  }
}