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

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

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

单击React js时处理输入值

1 个答案: