单击 React js 时处理输入值

Question

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

基本上我有这个：

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>
        );
    }
}

如何将我的输入值传递给我的函数和控制台记录状态的变化？

Answer 1

类似的东西，我建议使用受控输入和反应。

您可以在此处阅读更多信息https://reactjs.org/docs/forms.html

给你一个例子:) https://codesandbox.io/s/2486wxkn9n

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

在 _handleChange 方法中，您会收到事件。所以这是输入变化。如果你console.log这个值你可以看到他有名字，你在输入中传入的名字。这样，您可以将其用作对象的关键变量。所以 2 的一个功能 :)。

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>
    );
  }
}