Question

我是react.js中的一个菜鸟，我正在尝试通过编写一个简单的附加ap来学习状态和设置状态。我试图使用状态获取输入的2个值，但由于某种原因我点击添加按钮时没有得到任何东西。有人可以解释我如何添加2值和我做错了什么？谢谢！

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };

       this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }


  handlenum1Change (evt) {
    this.setState({ num1: evt.target.value });
  }





handlenum2Change(evt) {

    this.setState({ num2: evt.target.value });


}


   addAction (event) {

  var num1=this.setState({ num1: event.target.value });
  var num2=this.setState({ num2: event.target.value });



   this.setState({result: num1 + num2 })

            } 


  render() {


     return (


      <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
           <input type="number" ref="term" placeholder="Length of loan"  onChange={this.handlenum2Change}/>


            <input type="button" onClick={this.addAction} value="Add"/>
    <input type='text' value={this.state.result} readonly/>

        </label>

      </form>
    );
  }
}




export default Grade;

Answer 1

this.setState（）函数返回void。

所以
var num1=this.setState({ num1: event.target.value });只能获得undefined

如果你想获得num1使用

var num1=this.state.num1

NUM2

var num2=this.state.num2

Answer 2

您的代码中有许多事情需要纠正。＃1：你的添加动作是错误的。此外，您不需要两个句柄更改方法，如果您有10个字段，该怎么办？你不想写10个handlechange方法。请修改以下代码，让我知道它有效。

export default class AddComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number1: 0,
            number2: 0,
            total: 0
        }
    }
    handleChange = (e) =>{
        const {name, value} = e.target;
        this.setState({
            [name]: value
        })
    }

    add = () => {
        const{number1, number2} = this.state;
        this.setState({
            total: (parseInt(number1)+parseInt(number2))
        })
    }

    render() {
        const {total} = this.state;
        return (
            <div>
                 <div>{total}</div>
                 <div>
                     <label>Number 1</label>
                     <input type="text" name="number1" onChange={this.handleChange} />
                </div>
                <div>
                     <label>Number 2</label>
                     <input type="text" name="number2" onChange={this.handleChange}/>
                </div>
                <button onClick={this.add}>Add</button>
            </div>
        );
    }
}

Answer 3

您尚未将函数addAction绑定到this。因此，您必须与this.handlenum1Change = this.handlenum1Change.bind(this);一起添加。您也可以使用箭头功能执行此操作。要计算addAction中的值，您可以通过执行var num1 = this.state.num1而不是var num2=this.setState({ num2: event.target.value });来访问州。此外，您不应该致电setState close togehter。（通过搜索＆＃39;为什么setState是异步的＆＃39;）来阅读它本质上，您的addAction看起来应该是这样的：

addAction=()=>{
 this.setState({result: this.state.num1 + this.state.num2 })
}

React在输入中没有type="number"，您可以找到解决方法here。

所以你必须做一些像

这样的事情

handlenum1Change (evt) {
 console.log(evt.target.value);
 this.setState({ num1: Number(evt.target.value) });
}

使用handlenum1Change和handlenum2Change。

readOnly有O个资本，你的资金是readonly。总之，在一天结束时，您的代码应该类似于

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';

class Grade extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };
    this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
  }
  handlenum1Change (evt) {
    console.log(evt.target.value);
    this.setState({ num1: Number(evt.target.value) });
  }
  handlenum2Change(evt) {
    console.log(typeof evt.target.value);
    this.setState({ num2: Number(evt.target.value) });
  }
  addAction =(event)=> {
    let x = this.state.num1 + this.state.num2
    this.setState({result: x })
  }
render() {
 return (
    <form>
        <label>
          Name:
          <input type="number" onChange={this.handlenum1Change} />
          <input type="number"   onChange={this.handlenum2Change}/>
          <input type="button" onClick={this.addAction} value="Add"/>
          <input type='text' value={this.state.result} readOnly/>
        </label>
      </form>
    );
  }
}




export default Grade;

＆＃13;

我强烈建议你参加ReactJs的几门课程。

Answer 4

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      operator: '+',
      num1: '',
      num2: '',
      result: '0'
    };
    this.actionHandler = this.actionHandler.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this)
  }
  handleChange = (e) => {
    this.setState({ operator: e.target.value })
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: Number(e.target.value)
    });
  }

  actionHandler = (e) => {
    e.preventDefault();
    let x = this.state.num1 + this.state.num2;
    this.setState({ result: x })
  }
  render() {
    return (
      <div className="calculate">
        <form>

          <input type="text" onChange={this.handleInputChange} name="num1" placeholder="Enter 1st Number" />
          <br />
          <br />
          <label>
            <select value={this.state.operator} onChange={this.handleChange}>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
          </label>
          <br />
          <br />
          <input type="text" onChange={this.handleInputChange} name="num2" placeholder="Enter 2nd Number" />
          <br />
          <br />

          <button onClick={this.actionHandler} type="submit" > Answer </button>
          <input type="text" value={this.state.result} readOnly />
        </form>

      </div>
    );
  }
}

Answer 5

function Sum(props) {
    return (
       <h1>
        {props.a} + {props.b} = {props.a + props.b}
       </h1>
    );
}

ReactDOM.render(<Sum a={4} b={2}/>,document.getElementById('root'));

如何添加两个数字react.js

5 个答案: